方案一：
运用场景：系统根据登录账号的权限，动态加载左侧菜单; 后端直接返回的路由菜单数据
实现：
------------
*解决* ：这里不可以全局修改属性值，在个别使用到的地方做css的修改。
2.2对一级菜单、二级菜单的component参数进行分别判断
*（InitRouters中的业务逻辑，根据实际情况进行修改）*
*根据缓存中的name值去循环判断（这里name和path在配置的时候是一致的）...实际情况判断...*
Tip: 路由陷入无线循环的情况：
运用场景：系统根据登录账号的权限，动态加载左侧菜单; 后端直接返回的路由菜单数据
实现：
1.获取的数据格式
- 一级目录component: ”components/main”
- 二级目录component: ”components/parentView”
- 目录下菜单component: "view/organization/user/user1.vue", //实际指向而定
- path值不可有重复指向
------------
2.将后端树转化为路由树( libs/util.js )
- 递归树
|
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
}
|
- 后台管理踩过的坑
*解决* ：这里不可以全局修改属性值，在个别使用到的地方做css的修改。
2.2对一级菜单、二级菜单的component参数进行分别判断
3.全局管理并缓存路由
|
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)
}
})
},
|
4.重置路由，在最后添加404页面路径
获取到缓存里的数据，在until.js中的方法转化后得到路由数据，最后加上404页面路径并重置路由*（InitRouters中的业务逻辑，根据实际情况进行修改）*
- 除了考虑正常跳转，浏览器刷新，不存在的页面地址都需考虑
- Tip:浏览器刷新后，路由中的name值可能会消失
*根据缓存中的name值去循环判断（这里name和path在配置的时候是一致的）...实际情况判断...*
|
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
// version2
const 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
})
}
}
|
Tip: 路由陷入无线循环的情况：