前端的路由从后台获取,包括权限;

大体步骤包括:路由拦截(钩子函数)---->后台获取路由数据 ----> 保存到本地或vuex中.

在router-->index.js中:

 router.beforeEach((to, from, next) => { //拦截处一定要else{}
// 加载动态菜单和路由
if (to.path === '/') {
addDynamicMenuAndRoutes(to, from)
console.log(router.options.routes);
next()
} else {
if (store.state.menu.navTree) {
addDynamicMenuAndRoutes(to, from)
}
next()
}
})

一个Tip,钩子函数一定要记得else{},就这个小问题找了半天,各种排除。。。

我这里没有登录验证,所以通过path来判断是否加载动态路由;

下面的判断是由于vuex在F5刷新时会清空,所以通过里面是否有vuex里的某个状态来判断是否要再次加载路由;一般用登录的token判断;

下面是加载动态路由的关键函数:

 /**
* 加载动态菜单和路由
*/
function addDynamicMenuAndRoutes(to, from) {
// 处理IFrame嵌套页面
handleIFrameUrl(to.path)
api.menu.findMenuTree()
.then(res => {
// 添加动态路由
console.log(res.data)
let dynamicRoutes = addDynamicRoutes(res.data)
// 处理静态组件绑定路由
handleStaticComponent(router, dynamicRoutes)
router.addRoutes(router.options.routes)
console.log(router.options.routes)
// 保存加载状态
store.commit('menuRouteLoaded', true)
// 保存菜单树
store.commit('setNavTree', res.data)
}).then(res => {
// api.user.findPermissions({ 'name': userName }).then(res => {
// // 保存用户权限标识集合
// store.commit('setPerms', res.data)
// })
})
.catch(function(res) {})
}

添加动态路由:

 /**
* 添加动态(菜单)路由
* @param {*} menuList 菜单列表
* @param {*} routes 递归创建的动态(菜单)路由
*/
function addDynamicRoutes(menuList = [], routes = []) {
var temp = []
for (var i = 0; i < menuList.length; i++) {
if (menuList[i].children && menuList[i].children.length >= 1) {
temp = temp.concat(menuList[i].children)
} else if (menuList[i].url && /\S/.test(menuList[i].url)) {
//menuList[i].url = menuList[i].url.replace(/^\//, '')
menuList[i].url = menuList[i].url.substring(1);
try {
// 根据菜单URL动态加载vue组件,这里要求vue组件须按照url路径存储
// 如url="sys/user",则组件路径应是"@/views/sys/user.vue",否则组件加载不到
let array = menuList[i].url.split('/')
let url = ''
for (let i = 0; i < array.length; i++) {
url += array[i].substring(0, 1).toUpperCase() + array[i].substring(1) + '/'
}
url = url.substring(0, url.length - 1)
var route = {
path: menuList[i].url,
component: resolve => require([`@/views/${url}`], resolve),
name: menuList[i].name,
meta: {
icon: menuList[i].icon,
index: menuList[i].id
}
}
} catch (e) {}
// }
routes.push(route)
}
}
if (temp.length >= 1) {
addDynamicRoutes(temp, routes)
} else {
// console.log('动态路由加载...')
// console.log('动态路由加载完成.')
}
return routes
}

模拟后台的路由数据:

  "data": [{
"id": 1,
"createBy": null,
"createTime": null,
"lastUpdateBy": null,
"lastUpdateTime": null,
"parentId": 0,
"name": "系统配置",
"url": null,
"perms": null,
"type": 0,
"icon": "el-icon-setting",
"orderNum": 0,
"delFlag": 0,
"parentName": null,
"level": 0,
"children": [{
"id": 2,
"createBy": null,
"createTime": null,
"lastUpdateBy": null,
"lastUpdateTime": null,
"parentId": 1,
"name": "角色配置",
"url": "/sys/user",
"perms": null,
"type": 1,
"icon": "el-icon-service",
"orderNum": 1,
"delFlag": 0,
"parentName": "系统配置",
"level": 1,
"children": []
}, {
"id": 3,
"createBy": null,
"createTime": null,
"lastUpdateBy": null,
"lastUpdateTime": null,
"parentId": 1,
"name": "业务配置",
"url": "/sys/dept",
"perms": null,
"type": 1,
"icon": "el-icon-news",
"orderNum": 2,
"delFlag": 0,
"parentName": "系统配置",
"level": 1,
"children": []
}, {
"id": 4,
"createBy": null,
"createTime": null,
"lastUpdateBy": null,
"lastUpdateTime": null,
"parentId": 1,
"name": "权限配置",
"url": "/sys/role",
"perms": null,
"type": 1,
"icon": "el-icon-view",
"orderNum": 4,
"delFlag": 0,
"parentName": "系统配置",
"level": 1,
"children": []
}, {
"id": 5,
"createBy": null,
"createTime": null,
"lastUpdateBy": null,
"lastUpdateTime": null,
"parentId": 1,
"name": "流程控制",
"url": "/sys/menu",
"perms": null,
"type": 1,
"icon": "el-icon-menu",
"orderNum": 5,
"delFlag": 0,
"parentName": "系统配置",
"level": 1,
"children": []
},
{
"id": 7,
"createBy": null,
"createTime": null,
"lastUpdateBy": null,
"lastUpdateTime": null,
"parentId": 1,
"name": "大数据",
"url": "/sys/dict",
"perms": null,
"type": 1,
"icon": "el-icon-edit-outline",
"orderNum": 7,
"delFlag": 0,
"parentName": "系统配置",
"level": 1,
"children": []
},
{
"id": 8,
"createBy": null,
"createTime": null,
"lastUpdateBy": null,
"lastUpdateTime": null,
"lastUpdateTime": "2018-09-23T11:32:28.000+0000",
"parentId": 1,
"name": "数据过滤",
"url": "/sys/log",
"perms": "sys:log:view",
"type": 1,
"icon": "el-icon-info",
"orderNum": 8,
"delFlag": 0,
"parentName": "系统配置",
"level": 1,
"children": []
}, {
"id": 9,
"createBy": null,
"createTime": null,
"lastUpdateBy": "admin",
"lastUpdateTime": "2018-09-23T11:32:28.000+0000",
"parentId": 1,
"name": "系统维护",
"url": "/sys/dispose",
"perms": "sys:dispose:view",
"type": 1,
"icon": "el-icon-info",
"orderNum": 9,
"delFlag": 0,
"parentName": "系统配置",
"level": 1,
"children": []
}
]
}
]

本文主要参考 朝雨忆轻尘,感谢大佬的详细介绍。

另附出处: https://www.cnblogs.com/xifengxiaoma/

vue管理平台的动态路由(后台传递路由,前端拿到并生成侧边栏)的更多相关文章

  1. vue 中下拉select怎样给后台传递用户选择的物品id

    在泰康保险公众号项目中有个问题是用户选择select中的option,要把对应的id给后台以便后台工作作出相应的效果,我是这样的 <select v-model="selectcomu ...

  2. 基于SpringBoot+SSM实现的Dota2资料库智能管理平台

    Dota2资料库智能管理平台的设计与实现 摘    要 当今社会,游戏产业蓬勃发展,如PC端的绝地求生.坦克世界.英雄联盟,再到移动端的王者荣耀.荒野行动的火爆.都离不开科学的游戏管理系统,游戏管理系 ...

  3. Vue之单文件组件的数据传递,axios请求数据及路由router

    1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

  4. 关于vue项目管理项目的架构管理平台

    关于vue项目管理项目的架构管理平台 https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/faq 31.4k 次浏览 完整项目地址: ...

  5. vue2.0+elementUI构建单页面后台管理平台

    git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...

  6. 【vue】iView-admin2.0动态菜单路由

    vue项目实现动态路由有俩种方式 一.前端在routers中写好--所有--路由表 <前端控制路由>,登录时根据用户的角色权限来动态的显示菜单路由 二.前端通过调用接口请求拿到当前用户-- ...

  7. Vue | 自定义指令和动态路由实现权限控制

    功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...

  8. vue-element-admin改造接入后台,搭建有来商城youlai-mall后台前端管理平台

    一. 前言 本篇基于有来商城youlai-mall微服务项目,搭建后台前端管理平台,技术选型希望通过本篇文章你可以,技术解决方案选择了vue-element-admin.希望通过本篇文章你可以vue- ...

  9. vue-element-admin改造接入后台,搭建有来商城youlai-mall前后端分离管理平台

    一. 前言 本篇基于有来商城youlai-mall微服务项目搭建的后台前端管理平台,技术选型Vue+Element-UI实现前后端分离,解决方案选型vue-element-admin.希望通过本篇你可 ...

随机推荐

  1. mysql 存储过程与存储函数

    第一节:存储过程和函数的引入 存储过程和函数是在数据库中定义一些SQL 语句的集合,然后直接调用这些存储过程和函数来执行已经定义好的SQL 语句.存储过程和函数可以避免开发人员重复的编写相同的SQL ...

  2. Nginx笔记总结六:Nginx location配置

    语法规则:location [= | ~ | ~* | ^~] /uri/ {....} = 表示精确匹配 ^~ 表示uri以某个常规字符串开头 ~ 表示区分大小写的正则表达式 ~* 表示不区分大小写 ...

  3. fiddler https 您的连接不是私密连接 解决方法(不明原理但是照着做成功了,记录下)

    在桌面找到生成的证书 打开chrome chrome://settings/ 导入证书 再次运行fiddler,依次点击Tools下的Options,然后点HTTPS选项卡,再点击actions下的R ...

  4. 直播问答App乃虚火,调侃知识终不能长久盈利

    ​ 随着王思聪在微博宣布"我.我乐意",一款叫"冲顶大会"的App冲到了大众面前,紧接着"芝士超人"携10亿元奖金从天而降,瞬间之内,在线答 ...

  5. Spring5源码分析(1)设计思想与结构

    1 源码地址(带有中文注解)git@github.com:yakax/spring-framework-5.0.2.RELEASE--.git Spring 的设计初衷其实就是为了简化我们的开发 基于 ...

  6. 一劳永逸的解决AFNetworking3.0网络请求问题

    AFNetworking在iOS网络请求第三方库中占据着半壁江山,前段时间将AFNetworking进行了3.0版本的迁移,运用面向对象的设计将代码进行封装整合,这篇文章主要为还在寻找AFNetwor ...

  7. jsde与gulp使用说明

    jade是一款基于haml的html模板引擎,已改为pug 1.全局安装 npm install jade -g 新建一个jade文件夹,再建一个后缀名为.jade的文件编辑.jade文件 jade ...

  8. NERDTree快捷键

    切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w ...

  9. 记录R的一些黑魔法

    通路富集结果可视化 12345678 pathway<-read.table("PTC+_transcript_pep_supp_KEGG.txt",header=T,sep ...

  10. 拿到webshell之后的事情

    之前搞站都是搞到后台管理员,或者搞到webshell就宣布结束了,,今天终于有机会学习一下后面的操作了. 公司网站为php的站,已经拿到webshell.可以进行菜刀连接. 菜刀虚拟终端 php -m ...