VueRouter动态添加路由不生效及刷新后路由丢失问题求助

问题根源 #

动态添加的路由仅存在于应用内存中，当使用window.location硬跳转或页面刷新时，Vue实例和路由会重新初始化，内存中的动态路由会被清空。要保留动态路由，必须将路由配置持久化存储，并在应用启动时重新注入。

具体解决方案 #

1. 持久化动态路由配置

登录成功后，将后端返回的原始路由配置（而非内存中的路由实例）存入localStorage/sessionStorage。注意：组件无法直接序列化存储，需让后端返回组件名称，前端通过映射表匹配实际组件。

// Vuex loginUser action 修改
import { router } from "../app.js";
// 提前定义组件映射表
const componentMap = {
  TestComponent: () => import('../components/TestComponent.vue'),
  DashboardComponent: () => import('../components/DashboardComponent.vue')
};

const actions = {
  loginUser({ state, commit }, user) {
    return new Promise((resolve, reject) => {
      axios.get('/menuGeneration')
        .then(response => {
          // 处理后端路由数据，替换component为实际组件
          const processedRoutes = response.data.map(route => ({
            ...route,
            component: componentMap[route.component],
            meta: { ...route.meta, dynamic: true } // 标记为动态路由，方便后续管理
          }));
          
          // 移除旧的动态路由（避免重复添加）
          router.getRoutes().forEach(item => {
            if (item.meta?.dynamic) {
              router.removeRoute(item.name || item.path);
            }
          });
          
          // 添加新动态路由
          processedRoutes.forEach(route => router.addRoute(route));
          
          // 持久化原始路由数据（不含组件，仅存配置）
          localStorage.setItem('dynamicRoutes', JSON.stringify(response.data));
          
          router.push('/test');
          resolve();
        })
        .catch(err => {
          console.error(err);
          reject(err);
        });
    });
  }
};

2. 应用初始化时重新加载动态路由

在路由初始化文件（app.js）中，检查持久化的路由数据，启动时重新注入动态路由：

// app.js 修改
import VueRouter from 'vue-router';
import Vue from 'vue';
import PrincipalComponent from './components/PrincipalComponent.vue';
import Erreur403Component from './components/Erreur403Component.vue';
import { componentMap } from './componentMap';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'principal',
    component: PrincipalComponent,
  },
  {
    path: '/403',
    component: Erreur403Component,
  }
];

const router = new VueRouter({ routes });

// 初始化时加载持久化的动态路由
const savedRoutes = localStorage.getItem('dynamicRoutes');
if (savedRoutes) {
  const dynamicRoutes = JSON.parse(savedRoutes).map(route => ({
    ...route,
    component: componentMap[route.component],
    meta: { ...route.meta, dynamic: true }
  }));
  dynamicRoutes.forEach(route => router.addRoute(route));
}

export { router };

3. 退出登录时清理动态路由

退出时需清除持久化数据并移除内存中的动态路由，避免下次登录时出现冲突：

// Vuex logout action
const actions = {
  logoutUser({ commit }) {
    // 移除动态路由
    router.getRoutes().forEach(item => {
      if (item.meta?.dynamic) {
        router.removeRoute(item.name || item.path);
      }
    });
    // 清除持久化数据
    localStorage.removeItem('dynamicRoutes');
    // 跳转至首页/登录页
    router.push('/');
  }
};

额外注意事项 #

• 尽量使用router.push进行页面跳转，避免window.location硬跳转，减少路由丢失场景。
• 确保后端返回的路由name唯一，避免与静态路由冲突。
• 组件映射表需与后端返回的组件名称严格对应，否则会导致组件加载失败。

内容的提问来源于stack exchange，提问作者Zekura