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