|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//动态路由/** * @description 将后端菜单树转换为路由树 递归树 * @param {Array} menus * @returns {Array} */export const backendMenusToRouters = (menus) => { let routers = [] forEach(menus, (menu) => { // 将后端数据转换成路由数据 let route = backendMenuToRoute(menu) // 如果后端数据有下级，则递归处理下级 if (menu.children && menu.children.length !== 0 && menu.name != "") { route.children = backendMenusToRouters(menu.children) } routers.push(route) }) // console.log(routers) return routers} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
/** * @description 将后端菜单转换为路由 处理树 * @param {Object} menu * @returns {Object} */const backendMenuToRoute = (menu) => { // 具体内容根据自己的数据结构来定，这里需要注意的一点是 // 原先routers写法是component: () => import(‘@/view/error-page/404.vue‘) // 经过json数据转换，这里会丢失，所以需要按照上面提过的做转换，下面只写了核心点，其他自行处理 let route = Object.assign({}, menu) // route.component = () => import(`/* webpackChunkName: ${menu.title} */‘@/${menu.component}‘`)\ // 菜单配置的时候都是矢量图标库里面的图标所以要加上iconfont,ivew-admin里面都是默认的font-family：‘Ionicons‘=>转成 font-family:‘iconfont‘ if(menu.meta){ route.meta.icon = `iconfont ${menu.meta.icon}` } //矢量图标转划 if(menu.component == "components/main"){ route.component = Main; //一级菜单判断 } else if(menu.component == "components/parentView"){ route.component = parentView; //二级菜单判断 } else{ route.component = () => import(`@/${menu.component}`); } return route} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
///////////////动态路由/** * @param {Array} list 通过路由列表得到菜单列表 * @param access * @returns {Array} */export const getUserMenuByRouter = (list) => { // console.log(list) let res = [] forEach(list, item => { //meta没配置，或者配置了，但hideInMenu=false if (!item.meta || (item.meta && !item.meta.hideInMenu)) { let obj = { icon: (item.meta && item.meta.icon) || ‘‘, name: item.name, meta: item.meta } //有下级子元素或者showAlways=true并且还有权限访问，继续递归处理下级(item.meta && !item.meta.showAlways) if ((hasChild(item))) { obj.children = getUserMenuByRouter(item.children) } //如果配置了href,设置href if (item.meta && item.meta.href) obj.href = `${baseUrl}`+`${item.meta.href}` //加入 res.push(obj) } }) return res} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
// 获取用户相关信息 getUserInfo ({ state, commit }) { let paramer ={ token:state.token, refresData:false, } // console.log(state.token) return new Promise((resolve, reject) => { try { getUserInfo(paramer).then(res => { // console.log(res) const data = res.data.result // console.log("菜单",JSON.stringify(data.menuRoutes)) // commit(‘setAvatar‘, data.avatar) //头像 commit(‘setUserName‘, data.loginName) commit(‘setUserInfo‘, data) commit(‘setAccess‘, data.roleInfoDto.roleName) //权限 角色 commit(‘setHasGetInfo‘, true) let routers = backendMenusToRouters(data.menuRoutes) console.log(routers) commit(‘setRouters‘, routers) commit(‘setHasGetRouter‘, true) localStorage.setItem("getInfo", true); localStorage.setItem("router", JSON.stringify(data.menuRoutes)); resolve(data) }).catch(err => { reject(err) }) } catch (error) { reject(error) } }) }, |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
```html// version2const initRouters = (to, next) => { // 在路由最后动态添加404， path:"*" let rou = JSON.parse(localStorage.getItem("router")); let routers = backendMenusToRouters(rou); routers.push({ path: ‘*‘, name: ‘error_404‘, meta: { hideInMenu: true }, component: () => import(‘@/view/error-page/404.vue‘) }) router.addRoutes(routers); let arr = []; let names2 = []; let names = getAllNames(rou,arr); names2= names.concat(["login","home","error_401","error_500"]); console.log(names2) let path = to.path; let path1 = path.substr(path.lastIndexOf(‘/‘) + 1); console.log(path1) console.log(names2.includes(path1)) if (to.matched.length > 0 ) { next() } else if (to.name !== null && to.matched.length === 0) { next({ name: ‘error_404‘ }) return } else { next({ name: path1 }) }} |
原文：https://www.cnblogs.com/cyqdeshenluo/p/12176387.html