关于vue切换用户，路由表不更新问题

简介

我想很多同学在项目中可能会遇到类似的问题，然后一顿操作，发现结果不尽人意。于是查阅各种资料，走进很多坑（可能你阅读的这篇随笔也是个坑）。接下来我所描述的是关于我使用不同权限的用户切换登陆后，需要我按下键盘F5刷新浏览器，路由表才会更新的问题以及如何解决。

有关问题的关键词：

• router.beforeEach()
• router.addRoutes()
• whiteList
• store.getters.token
• router.options.routes
• router.matcher
• resetRouter

目前我使用的是^3.0.1版本

问题

• 我的所有路由表是静态写在router.js里面，然后在每一个meta里面添加一个role,例如：role: ["home"]
  
  当用户登录成功获取到后来返回的 authRoles (是一个数组，里面对于这个每一个role字符串)。然后在router.beforeEach 的时候比对 role 是否有权限访问，生成新的路由表。
• 在每一个tabs里我会拿取 router.option 进行判断是否显示改tab.

  

- 我在网上找了很多资料，大部分都说需要写一个 `resetRouter` 函数，重新设置 `match`（试了并没有什么用）。
- [来自issues](https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465)。
- 开始以后是我的这种方式问题，需要用router.addRoutes这种方式。于是花费大量时间改成addRoutes这种方式，结果依然如此。

解决

• 思考了半天，这可能是vue-router的一个bug，希望早日修复。
• 目前使用location.reload()在每一次退出用户的时候调用刷新文档解决。