VUE 动态菜单管理
业务场景
不同的用户登录,看到的菜单会不一样,因此需要根据不同人登录的身份去后端获取菜单。
实现思路
1.构建路由
2.从后端构建菜单
3.前端获取菜单
4.前端渲染菜单
1.构建路由。
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
}, {
path: '/404',
component: () => import('@/views/404'),
hidden: true
}, {
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' }
}]
},
构建路由
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
}) const router = createRouter() // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
} export default router
2.从后台构建menu菜单
@RequestMapping("/get")
@ResponseBody
public JSONArray menu(HttpServletResponse response) throws IOException {
StringBuilder sb=new StringBuilder();
sb.append("[");
sb.append("{");
sb.append(" \"path\": \"/login\",");
sb.append(" \"hidden\": true");
sb.append("},"); sb.append("{");
sb.append(" \"path\": \"/404\",");
sb.append(" \"hidden\": true");
sb.append(" },"); sb.append("{");
sb.append(" \"path\": \"/\",");
3.前端获取菜单
export function getMenu() {
return request({
url: '/menu/get',
method: 'get'
})
}
4.渲染菜单
created() { getMenu().then( res => {
this.routes=res.data;
debugger
}).catch(error => {
console.info(error)
debugger
})
}
调用API获取菜单,并复制到 routes 中。
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
VUE 动态菜单管理的更多相关文章
- ASP。使用依赖注入的asp.net Core 2.0用户角色库动态菜单管理
下载source code - 2.2 MB 介绍 在开始这篇文章之前,请阅读我的前一篇文章: 开始使用ASP.NET Core 2.0身份和角色管理 在上一篇文章中,我们详细讨论了如何使用ASP.N ...
- vue 动态菜单以及动态路由加载、刷新采的坑
需求: 从接口动态获取子菜单数据 动态加载 要求只有展开才加载子菜单数据 支持刷新,页面显示正常 思路: 一开始比较乱,思路很多.想了很多 首先路由和菜单共用一个全局route, 数据的传递也是通过s ...
- 【vue】iView-admin2.0动态菜单路由
vue项目实现动态路由有俩种方式 一.前端在routers中写好--所有--路由表 <前端控制路由>,登录时根据用户的角色权限来动态的显示菜单路由 二.前端通过调用接口请求拿到当前用户-- ...
- vue+element-ui实现无限级动态菜单树
使用vue+element-ui实现无限级动态菜单 该案例实现主要使用递归的思想,递归对新人来容易迷惑的是自己调用自己,直到满足条件为止,接下来我们就一步一步实现一个动态多级菜单vue组件 搭建项目并 ...
- 循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理
在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图 ...
- winform快速开发平台 -> 通用权限管理之动态菜单
这几个月一直忙APP的项目,没来得及更新项目,想想该抽出时间整理一下开发思路,跟大家分享,同时也希望得到宝贵的建议. 先说一下我们的权限管理的的设计思路,首先一个企业信息化管理系统一定会用到权限管理, ...
- 【ABP】 动态菜单修改过程asp.netcore+vue
无论用什么框架,第一件事情就是实现动态菜单,从数据库中读取菜单配置项输出前台,网上翻了一大堆翻译文档,也看了官方英文文档,关键点在于如何实现NavigationProvider和在前端调用abp.na ...
- vue、iview动态菜单(可折叠)
vue项目与iview3实现可折叠动态菜单. 菜单实现一下效果: 动态获取项目路由生成动态三级菜单导航 可折叠展开 根据路由name默认打开子目录,选中当前项 自动过滤需要隐藏的路由(例:登陆) 在手 ...
- 【vue】iView-admin2.0动态菜单路由【版2】
依照iView-admin2.0动态菜单路由[版1] 归纳几个节点动态路由获取方式2 ——> easymock假数据 ——> 数据转组件处理.addRoutes ——> localS ...
随机推荐
- windows下socket编程实现client和server双向通信
服务端代码server.c // server.cpp : Defines the entry point for the console application. // #include <s ...
- 博客索引and题目列表
目录 笔记整理 计划 要学的东西 缺省源 要做的题 搜索 高斯消元 矩阵 排列组合 2019.7.9 2019.7.10 kmp ac自动机 2019.7.11 2019.7.15 笔记整理 1.同余 ...
- CSS居中方案
1.行内元素或者内联元素 1.垂直居中 设置行高和高度一致,如果没必要设置高度的话,可以直接利用line-height垂直性,直接设置需要的高度为line-height的高度亦可居中 .center- ...
- Webdriver get(url)加载时间太长
运行Selenium脚本时,发现有时候由于网络或性能问题,加载网页时间太长,无法继续执行后续操作,但是实际上元素都已经加载出来了. 解决 # 设置页面加载超时时间 d.set_page_load_ti ...
- shell脚本-练习1
- listings技巧
1. \lstdefinestyle 参考 https://blog.csdn.net/ProgramChangesWorld/article/details/52142313 我们在使用listin ...
- 2018-2019-2 20165315《网络对抗技术》Exp 8 Web基础
2018-2019-2 20165315<网络对抗技术>Exp 8 Web基础 一.实验内容 Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST ...
- 用简单的JS代码制作计算器
代码+注释一共不到200行,是练习交流的必备良药 主界面如下: 操作示意图: 以下是代码部分 HTML: <div> <table class="window"& ...
- thinkphp5的钩子怎么用
1.创建钩子行为 我们自己定义的标签位可以直接放在Think\Behaviors中,也可以放在应用目录中,比如说Home模块下,新建一个Behaviors的文件夹,在文件夹内新建: 标签名+Behav ...
- Xamarin.Android 6.0以后开启权限方法
Android 6.0 版本以上一些危险权限只能在运行的时候依次询问用户是否赋予,所以在开发的时候使用 RequestPermissions 方法单独请求所需要的权限. 代码: //开启相机权限 if ...