配置每个页面的meta信息
meta:{
grade:[1,2,3],
title:'页面标题',
icon:'图标',
show:'是否展示导航'
}
将无权限的页面路由直接配置到routes
let routes = [
{
path: '/login',
name: 'login',
component: () => import('../components/login/login.vue')
},
{
path: '/404',
alias: '*',
meta: {
grade: [1, 2]
},
component: () => import("../components/404.vue")
}
];
let router = new Router({
routes,
mode: "history"
})
在路由信息中将符合用户权限的页面筛选出来(注意不要操作原数据)
- 深拷贝一份数据
- 对数据进行处理
- 将处理后的路由存入store(这是为了生成左侧导航)
router.addRoute()方法将路由信息添加至路由
function addRoutes(data) {
for (let i = 0; i < data.length; i++) {
router.addRoute(data[i])
}
}