vue-router動態載入路由
阿新 • • 發佈：2018-12-11
我們用vue開發一個帶許可權的管理系統。根據不用的使用者，顯示選單項不同
場景：前端選單不是靜態的寫在vue程式裡，而是要從後臺介面中獲取的的選單列表 來 動態載入到vue應用中
思路：1、登入成功的同時後臺會返回給我們選單列表，此時我們便在vue-router中插入這個選單所對應的路由配置
2、配置好路由後，在新增左側選單靜態效果
3、如果使用者沒有該選單的許可權，但是自己在網頁位址列輸入了該選單的地址。此時我們應該把頁面重定向到首頁
實現：這裡我們重點只說如何插入路由，很簡單：
1、首先插入路由 this.$router.options.routes[0].children.push() 。這裡我們可以console.log(this.$router.options)檢視一下。
this.$router.options.routes[0].children.push({// 插入路由 name: 'map', path: '/map', component: resolve => require(['../page/map'], resolve)// 將元件用require引進來 })
2、當所有路由插入好，呼叫插入的路由。做到這裡路由就已經註冊完畢可以正常使用了
this.$router.addRoutes(this.$router.options.routes)// 呼叫addRoutes新增路由這裡我扔一個最近專案中的例子，在二級路由中繼續新增路由。有需要的可以參考一下
if (list.indexOf('map/getMapPage') !== -1) { this.$router.options.routes[1].children.push({// 插入路由 name: 'map', path: '/map', component: resolve => require(['../page/map'], resolve)// 將元件用require引進來 }) } if (list.indexOf('getDeviceList') !== -1 || list.indexOf('getDeviceList') !== -1) { let routerData = { path: '/device', name: 'device', component: resolve => require(['../page/device/content.vue'], resolve), children: [ { path: '/device/basiclist', name: 'basiclist', component: resolve => require(['../page/device/basiclist.vue'], resolve) } ] } if (list.indexOf('getDeviceList') !== -1) { routerData.children.push( { path: '/device/basiclist', name: 'basiclist', component: resolve => require(['../page/device/basiclist.vue'], resolve) }, { path: '/device/basicNew', name: 'basicNew', component: resolve => require(['../page/device/basicNew.vue'], resolve) } ) } if (list.indexOf('getGroupList') !== -1) { routerData.children.push( { path: '/device/grounplist', name: 'grounplist', component: resolve => require(['../page/device/grounpList.vue'], resolve) } ) } this.$router.options.routes[1].children.push(routerData) } this.$router.addRoutes(this.$router.options.routes)// 呼叫addRoutes新增路由