addRoutes爬坑記

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