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 ...
随机推荐
- (转)简单的Malloc实现
现在,一般来说,我们可以实现malloc使得对malloc的调用将会被映射到系统调用sbrk上,sbrk(n)将会移动程序中断的位置-也就是程序的data段的最后.-偏移n个字节,这意味着,n个字节的 ...
- 【树状数组】【P3372】 【模板】线段树 1
Description 给定一个长度为 \(n\) 的序列,有 \(m\) 次操作,要求支持区间加和区间求和. Limitation \(1 \leq n,~m \leq 10^5\) 序列元素值域始 ...
- 石锤了!google彻底断供华为,只能加速鸿蒙生态的形成
前言 操作系统是当今科技行业的灵魂,而即将推出这款操作系统是一个集电脑.手机.汽车等设备于一体的系统.如今手机行业里已经是一片红海了,竞争相当激烈,但是竞争归竞争,但是一旦扯上别的事就更麻烦了,像华为 ...
- mysql统计当前月和近30天每天的数据
1,当前月 SELECT DATE_FORMAT(check_time,'%Y-%m-%d') as time, COUNT(*) FROM dw_rule WHERE check_state = 3 ...
- 第8课 常量表达式(constexpr)
一. const 和constexpr的区别 (一)修饰变量时,const为“运行期常量”,即运行期数据是只读的.而constexpr为“编译期”常量,这是const无法保证的.两者都是对象和函数接口 ...
- [ARM-Linux]Linux-MATLAB安装
说明 网上关于caffe的安装教程非常多,但是关于每一步是否操作成功,出现了什么样的错误又该如何处理没有给出说明.因为大家的操作系统的环境千差万别,按照博客中的教程一步步的安装,最后可能失败--这是很 ...
- cad.net 2008使用WPF(摘录山人)
由于WPF的优点多多,而且在大量的winform的操作下感觉到数据操作的麻烦....推荐大家看杨中科WPF数据绑定教程 https://www.bilibili.com/video/av3388348 ...
- fio压测
目录 fio工具介绍 参数介绍 测试举例 模板如下: 四路服务器测试的小tips fio工具介绍 用于测试存储设备IO性能. 当存储设备中存在用户数据时,严谨使用fio进行写操作!!! 参数介绍 rw ...
- C#调用摄像头(AForge)实现扫描条码解析(Zxing)功能
网上找了很多代码,都比较零散,以下代码纯自己手写,经过测试.下面有链接,下载后可以直接使用. 介绍: 自动识别:点击Start按钮会调用PC摄像头,代码内置Timer,会每100毫秒识别一下当前摄像头 ...
- web开发-心路历程
从事web开发已经有几年了,感触颇多,在此记录一下. 对于学习: 几年的经历让我认识到了,学习确实是一个持续永恒的过程.目前的社会发展很快,各种新的思想,新的机会不断刷新我的认知,也让我体会到了自己能 ...