vue router提供了addRoutes，却没有提供removeRoutes的解决方案

vue router官方提供的一个动态添加路由的方法。但是在很多场景下，我们需要退出登录时清空动态添加路由的方法，这样退出登录后就不需要刷新页面，影响用户体验，但是官方没有提供，所以我自己实现一个重置路由的方法。

我们直接继承vue-router

// Router.js
import VueRouter from 'vue-router';

class Router extends VueRouter {
  constructor(options) {
    super(options);
    this.resetRoutes = this.resetRoutes.bind(this);
  }

  // 重置路由，将路由重置到构造时的路由
  resetRoutes() {
    const { routes, mode } = this.options || {};

    this.matcher = new VueRouter({ routes: routes || [], mode })?.matcher;
  }
}

export default Router;

使用方法和之前相同

// 之前的用法
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
});

export default router;
// 改动后的用法
import Vue from 'vue';
import Router from './Router';
import routes from './routes';

Vue.use(Router);

const router = new Router({
  routes,
});

export default router;

这样退出登录时调用this.$router.resetRoutes()方法重置路由，然后登录成功后根据权限来调用this.$router.addRoutes(路由数组)方法，这样就不用刷新页面了。