vue2后台动态路由

vue管理平台的动态路由（后台传递路由，前端拿到并生成侧边栏）
前端的路由从后台获取，包括权限；

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

在router-->index.js中：

 1  router.beforeEach((to, from, next) => { //拦截处一定要else{}
 2  // 加载动态菜单和路由
 3  if (to.path === '/') {
 4  addDynamicMenuAndRoutes(to, from)
 5  console.log(router.options.routes);
 6  next()
 7  } else {
 8  if (store.state.menu.navTree) {
 9  addDynamicMenuAndRoutes(to, from)
10  }
11  next()
12  }
13  })

 

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

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

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

 1  /**
 2  * 加载动态菜单和路由
 3  */
 4  function addDynamicMenuAndRoutes(to, from) {
 5  // 处理IFrame嵌套页面
 6  handleIFrameUrl(to.path)
 7  api.menu.findMenuTree()
 8  .then(res => {
 9  // 添加动态路由
10  console.log(res.data)
11  let dynamicRoutes = addDynamicRoutes(res.data)
12  // 处理静态组件绑定路由
13  handleStaticComponent(router, dynamicRoutes)
14  router.addRoutes(router.options.routes)
15  console.log(router.options.routes)
16  // 保存加载状态
17  store.commit('menuRouteLoaded', true)
18  // 保存菜单树
19  store.commit('setNavTree', res.data)
20  }).then(res => {
21  // api.user.findPermissions({ 'name': userName }).then(res => {
22  // // 保存用户权限标识集合
23  // store.commit('setPerms', res.data)
24  // })
25  })
26  .catch(function(res) {})
27  }

 

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

　　添加动态路由：

 1  /**
 2 * 添加动态(菜单)路由
 3  * @param {*} menuList 菜单列表
 4  * @param {*} routes 递归创建的动态(菜单)路由
 5  */
 6  function addDynamicRoutes(menuList = [], routes = []) {
 7  var temp = []
 8  for (var i = 0; i < menuList.length; i++) {
 9  if (menuList[i].children && menuList[i].children.length >= 1) {
10  temp = temp.concat(menuList[i].children)
11  } else if (menuList[i].url && /\S/.test(menuList[i].url)) {
12  //menuList[i].url = menuList[i].url.replace(/^\//, '')
13  menuList[i].url = menuList[i].url.substring(1);
14  try {
15  // 根据菜单URL动态加载vue组件，这里要求vue组件须按照url路径存储
16  // 如url="sys/user"，则组件路径应是"@/views/sys/user.vue",否则组件加载不到
17  let array = menuList[i].url.split('/')
18  let url = ''
19  for (let i = 0; i < array.length; i++) {
20  url += array[i].substring(0, 1).toUpperCase() + array[i].substring(1) + '/'
21  }
22  url = url.substring(0, url.length - 1)
23  var route = {
24  path: menuList[i].url,
25  component: resolve => require([`@/views/${url}`], resolve),
26  name: menuList[i].name,
27  meta: {
28  icon: menuList[i].icon,
29  index: menuList[i].id
30  }
31  }
32  } catch (e) {}
33  // }
34  routes.push(route)
35  }
36  }
37  if (temp.length >= 1) {
38  addDynamicRoutes(temp, routes)
39  } else {
40  // console.log('动态路由加载...')
41  // console.log('动态路由加载完成.')
42  }
43  return routes
44  }

 

　　模拟后台的路由数据：

  1  "data": [{
  2  "id": 1,
  3  "createBy": null,
  4  "createTime": null,
  5  "lastUpdateBy": null,
  6  "lastUpdateTime": null,
  7  "parentId": 0,
  8  "name": "系统配置",
  9  "url": null,
 10  "perms": null,
 11  "type": 0,
 12  "icon": "el-icon-setting",
 13  "orderNum": 0,
 14  "delFlag": 0,
 15  "parentName": null,
 16  "level": 0,
 17  "children": [{
 18  "id": 2,
 19  "createBy": null,
 20  "createTime": null,
 21  "lastUpdateBy": null,
 22  "lastUpdateTime": null,
 23  "parentId": 1,
 24  "name": "角色配置",
 25  "url": "/sys/user",
 26  "perms": null,
 27  "type": 1,
 28 "icon": "el-icon-service",
 29 "orderNum": 1,
 30 "delFlag": 0,
 31 "parentName": "系统配置",
 32 "level": 1,
 33 "children": []
 34 }, {
 35 "id": 3,
 36 "createBy": null,
 37 "createTime": null,
 38 "lastUpdateBy": null,
 39 "lastUpdateTime": null,
 40 "parentId": 1,
 41 "name": "业务配置",
 42 "url": "/sys/dept",
 43 "perms": null,
 44 "type": 1,
 45 "icon": "el-icon-news",
 46 "orderNum": 2,
 47 "delFlag": 0,
 48 "parentName": "系统配置",
 49 "level": 1,
 50 "children": []
 51 }, {
 52 "id": 4,
 53 "createBy": null,
 54 "createTime": null,
 55 "lastUpdateBy": null,
 56 "lastUpdateTime": null,
 57 "parentId": 1,
 58 "name": "权限配置",
 59 "url": "/sys/role",
 60 "perms": null,
 61 "type": 1,
 62 "icon": "el-icon-view",
 63 "orderNum": 4,
 64 "delFlag": 0,
 65 "parentName": "系统配置",
 66 "level": 1,
 67 "children": []
 68 }, {
 69 "id": 5,
 70 "createBy": null,
 71 "createTime": null,
 72 "lastUpdateBy": null,
 73 "lastUpdateTime": null,
 74 "parentId": 1,
 75 "name": "流程控制",
 76 "url": "/sys/menu",
 77 "perms": null,
 78 "type": 1,
 79 "icon": "el-icon-menu",
 80 "orderNum": 5,
 81 "delFlag": 0,
 82 "parentName": "系统配置",
 83 "level": 1,
 84 "children": []
 85 },
 86 {
 87 "id": 7,
 88 "createBy": null,
 89 "createTime": null,
 90 "lastUpdateBy": null,
 91 "lastUpdateTime": null,
 92 "parentId": 1,
 93 "name": "大数据",
 94 "url": "/sys/dict",
 95 "perms": null,
 96 "type": 1,
 97 "icon": "el-icon-edit-outline",
 98 "orderNum": 7,
 99 "delFlag": 0,
100 "parentName": "系统配置",
101 "level": 1,
102 "children": []
103 },
104 {
105 "id": 8,
106 "createBy": null,
107 "createTime": null,
108 "lastUpdateBy": null,
109 "lastUpdateTime": null,
110 "lastUpdateTime": "2018-09-23T11:32:28.000+0000",
111 "parentId": 1,
112 "name": "数据过滤",
113 "url": "/sys/log",
114 "perms": "sys:log:view",
115 "type": 1,
116 "icon": "el-icon-info",
117 "orderNum": 8,
118 "delFlag": 0,
119 "parentName": "系统配置",
120 "level": 1,
121 "children": []
122 }, {
123 "id": 9,
124 "createBy": null,
125 "createTime": null,
126 "lastUpdateBy": "admin",
127 "lastUpdateTime": "2018-09-23T11:32:28.000+0000",
128 "parentId": 1,
129 "name": "系统维护",
130 "url": "/sys/dispose",
131 "perms": "sys:dispose:view",
132 "type": 1,
133 "icon": "el-icon-info",
134 "orderNum": 9,
135  "delFlag": 0,
136 "parentName": "系统配置",
137 "level": 1,
138 "children": []
139 }
140 ]
141 }
142 ]

 

　　

posted @ 2022-02-23 19:20  举个栗子走天下  阅读(1039)  评论(0)  编辑  收藏  举报