Vue后台管理项目经常有权限控制，不同角色使用不同权限，常用方法就是用addRoutes来动态添加路由，但有两个问题是官方文档上找不到解决方案的
- 角色切换，addRoutes提示有重复的路由，无法删除之前角色的路由
- 刷新页面，动态路由消失，提示404
常用解决方案
网上常用的解决方案角色切换的时候刷新页面，这样之前的路由就消失了，在正常页面刷新时，将路由信息储存到localStorage中，在router.beforeEach中读出路由信息，加入到addRoutes中；
首先这样做体验一般，切换页面的刷新操作，会有明显的页面闪动，localStorage中储存路由信息也不好，很容易被修改，不安全
终极解决方案
-
角色切换时，重新创建一个
Newrouter，用新的newRouter.matcher覆盖掉原来的router.matcher/** * 在router/index.js中定义$addRoutes,调用这个方法来添加路由，这个方法会先重置路由 这个路由只会包括非权限页，比如登录页，再调用router.addRoutes添加权限路由， 此方法亲测，完美解决，方法来自GitHub的issues,https://github.com/vuejs/vue-router/issues/2886 */ const constantRouterMap = [] // 默认的路由规则，比如登录页（非权限页） router.$addRoutes = (params) => { router.matcher = new VueRouter({ // 重置路由规则 routes: constantRouterMap }).matcher router.addRoutes(params) // 添加路由 } -
刷新页面时，在
router.onReady中添加动态路由，当页面刷新后，路由加载完成后，会执行router.OnReady方法，在这个方法中请求权限路由添加进入就可以了，并且这个方法只执行一次，即动态路由添加完成后，不执行这个方法，仅在刷新后执行一次/** * onReady方法可以看官方文档，不赘述了 */ router.onReady(() => { const status = true // 判断用户已登录且已有权限 if (status) { store.dispatch('getJurisdiction') // 请求动态路由 .then(e => { router.addRoutes(e.list) // 添加动态路由,这里不必用$addRoutes，因为刷新后就没有上一次的动态路由，故不必清除 }) } })
注意事项
404页面闪现的问题，如果404页面在默认路由中，刷新页面动态路由正在加载时，页面就会短暂的显示404，解决方案就是，将404页面放在动态路由中加载，即获取动态路由后，push上404页，这样就完美解决了
有问题欢迎留言哦！
2021/08/16更新
在vue-router 3.5.0版本中，router.addRoutes被标记为不推荐的API，建议使用 router.addRoute 在vue-router 4.x 中，router.addRoutes被删除，只能使用 router.addRoute
2021/12/17更新
重置路由的典型场景
我们有一个后台管理系统，有两种账号角色，
- 管理员，拥有所有路由，
- 普通，拥有部分路由，
我们进入未登录的系统，此时系统只有非权限路由，即 登录页，404页，这些非登录状态下也能查看的页面，其他路由未挂载
我们进入登录页，填写管理员的账号密码，此时无需清除路由，直接使用addRoutes添加路由，无需刷新，系统正常
然后我们点击退出登录按钮，此时又进入了登录页，程序执行清除路由的操作，注意：此时还没有登录新账号，退出登录要清空路由，只保留非权限页。
然后登录新账号，无需清除路由，直接使用addRoutes添加路由，无需刷新，系统正常
