最近在写项目，实现动态菜单及细粒化按钮权限功能，依托于vue-router动态路由的实现，可以实时从后端获取路由权限，并及时更新。

动态路由的实现可以看这篇完整文章：vue实现动态路由。

问题：

在使用addRoutes方法更新路由表的时候，发现从后端带来的权限信息并没有更新掉原有的路由信息。

思路：

查看vue-router文档，发现addRoutes已经不被推荐使用了，后来使用新的addRoute方法来逐个更新路由，发现并不能解决问题。api也没有提供remove路由的操作。

嗯~ 开始面向百度编程，发现普遍写法是：通过新建一个router对象然后更新替换掉原有的router对象matcher属性，来解决问题。

实现方式一般是在vu-router 的index页面写一个resetRouter方法，然后在调用addRoutes前调用resetRouter来重置router。个人觉得此种方法虽能解决问题，但不够优雅~

解决方法：

提供本人解决方法，全网首发：通过重写vueRouter对象的addRoutes方法来实现上述功能，就可以按照原来的调用方式来调用啦！

代码如下： 

const createRouter = (routes) => {
  return new VueRouter({
    mode: process.env.VUE_APP_ROUTER_MODE,
    base: process.env.BASE_URL,
    routes,
  });
};

const router = createRouter(routes);

// 重写addRoutes
const addRoutes = VueRouter.prototype.addRoutes;
VueRouter.prototype.addRoutes = function (newRoutes) {
  router.matcher = createRouter(routes).matcher; //通过重置matcher来重置router
  addRoutes.call(this, newRoutes); //调用原有方法
};

这样调用时，依旧是原来的调用方式~，不用修改其他代码啦！

router.addRoutes(dynamicRoutes); //在需要的地方调用