配置每个页面的meta信息
meta:{ grade:[1,2,3], //权限等级 title:'页面标题', icon:'图标', show:'是否展示导航' }
将无权限的页面路由直接配置到routes
let routes = [ { path: '/login', name: 'login', component: () => import('../components/login/login.vue') }, // 404 { 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]) } }