addRoutes爬坑記

用動態路由完成權限掌握，是一個很nice的計劃不是么？ 初始路由只要登錄頁，依據用戶的id查詢對應的權限，然後addRoutes，將獲取到的菜單數據放入vuex和瀏覽器緩存中。

動態增加更多的路由劃定規矩。參數必需是一個相符 routes 選項請求的
數組。

這裏的routers實在就是代表未來寄存菜單權限的js，即vuex中一個state

// 初始路由文件
import Vue from 'vue'
import Router from 'vue-router'
import routers from './router'
Vue.use(Router)
const index = () => import('@/views/index/index')
export default new Router({
routes: [
{ path: '/', component: index },
...routers
]
})

addRoutes 要領運用

let router = [
{
path: '*', component: (resolve) => require(['@/views/addRoutes/404.vue'], resolve), name: '404', description: '這是addRoutes出來的404頁面'
},
{
path: '/foo', component: (resolve) => require(['@/views/addRoutes/foo.vue'], resolve), name: 'foo', description: '這是addRoutes出來的foo頁面'
}
]
// addRoutes
this.$router.addRoutes(router)

如許就完成了動態路由的增加，你能夠試着在addRoutes後用this.$router.push({path: '你的路由地點'})去接見你新增加的路由元。

然則如許並沒有完畢，由於你把404頁面襯着在了前面， 如許會致使在某些情況下你的foo路由會被襯着為404頁面，由於路由先找到404頁面。所以我們需要把404放在最下面。

let router = [
{
path: '/foo', component: (resolve) => require(['@/views/addRoutes/foo.vue'], resolve), name: 'foo', description: '這是addRoutes出來的foo頁面'
},
{
path: '*', component: (resolve) => require(['@/views/addRoutes/404.vue'], resolve), name: '404', description: '這是addRoutes出來的404頁面'
}
]

這個時刻就到了找bug的時刻了，我們發如今革新瀏覽器以後，我們動態增加的路由劃定規矩居然不見了，不要慌，這個時刻就輪到vuex上台了，也就是最最先提到的將獲取到的菜單數據放入vuex和瀏覽器緩存中。

處理計劃： 將瀏覽器緩存中的菜單數據與vuex綁定起來，將vuex的數據與router實例綁定起來，固然，你也能夠直接將瀏覽器緩存與router實例綁定起來，然則不發起這麼做，畢竟瀏覽器緩存不是你能夠掌握的。如許就處理了革新后喪失的bug了。

源碼地點

別的放上新搭建的博客地點：http://blacklisten.cn