Vue动态路由路径重复及刷新丢失页面问题的解决

router.$addRoutes = params => {
  router.matcher = new Router({
    routes: router.options.routes
　　// 关键代码
  }).matcher;
  router.addRoutes(params);
};

if (from.name === null) {
      // 刷新
      router.$addRoutes(accessRoutes);
      // 确保页面加载完成
      next({ ...to, replace: true });
  } 

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes;
    state.routes = constantRoutes.concat(routes);
  },
  RESET_ROUTES: (state, payLoad) => {
    state.addRoutes = [];
    state.routes = [];
  }
}; 

generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      // 关键代码 == 添加路由前将路由重置为空
      commit("RESET_ROUTES");
      // 设置登录的路由权限
      let accessedRoutes;
   
     if (roles === 4) {
        // 教师登录
       accessedRoutes = teacherRouter;
     }
     if (roles === 3) {
       // 学生登录
       accessedRoutes = studentRouter;
     }

     commit("SET_ROUTES", accessedRoutes);
     resolve(accessedRoutes);
   }); 

const createRouter = () => new Router({
     mode: 'history',
     routes: constantRoutes
})
const router = createRouter()
export function resetRouter () {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher
}
export default router

import router,{resetRouter} from './router'
store.dispatch('GenerateRoutes').then(accessRoutes => {
    // 根据roles权限生成可访问的路由表
    resetRouter()
    router.addRoutes(accessRoutes)// 动态添加可访问路由表
})