vueRouter--matcher之动态增减路由方式

const createRouter = () =>  new Router({
    routes: [{
            path: '/',
            name: '登录',
            component: login
        }]
const router = createRouter()
export function resetRouter () { 
 const newRouter = createRouter()
 router.matcher = newRouter.matcher
}
export default router

import {resetRouter} from '@/router'
 resetRouter();
 this.$router.addRoutes(routeMenu);

// 开放的路由，可以直接访问
const ALLOW_ROUTES = [
  '/login',
  '/buy',
  // ...
];

if (!ALLOW_ROUTES.includes(to.path) && !isLogin) { // 未登录
  next({
    path: '/login',
    replace: true
  });
  return;
}

if(isLogin && (sessionStorage.getItem('curPath') || to.matched[0].path === '*')  ) {
  sessionStorage.removeItem('curPath');
  // 还原路由（防止路由重复）
  router.matcher = new VueRouter({
    // mode: 'history',
    routes
  }).matcher;
  router.addRoutes(routes: Array<RouteConfig>); // 追加路由
  // util.generateMenu(); // 生成菜单，视具体情况而定
  next({
    path: to.path
  });
  return;
}

router.afterEach(to => {
  // 保存路径
  if (to.path !== '/login') {
    sessionStorage.setItem('curPath', JSON.stringify({
      path: to.path
    }));
  }
})

if(router.currentRoute.name !== 'login') {
  router.push({
    name: 'login'
  })
}