1，配置每個頁面的meta信息

meta:{grade:[1,2,3], //權限等級title:'頁面標題',icon:'圖標',show:'是否展示導航' }

2，將無權限的頁面路由直接配置到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" })

3，在路由信息中將符合用戶權限的頁面篩選出來（注意不要操作原數據）

• 深拷貝一份數據
• 對數據進行處理
• 將處理后的路由存入store（這是為了生成左側導航）

4，router.addRoute()方法將路由信息添加至路由

function addRoutes(data) {for (let i = 0; i < data.length; i++) {router.addRoute(data[i])} }

總結

以上是生活随笔為你收集整理的vue路由权限的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。