如何在Router的index.ts中获取数据加载路由？解决页面刷新路由失效问题

你的核心问题在于：页面刷新时，Vue Router会先根据已有的路由表进行匹配，而你通过异步请求添加动态路由的操作晚于这次匹配，导致目标路由找不到，出现空白。下面是具体的解决思路和代码：

关键优化点 #

• 标记动态路由加载状态：避免每次导航都重复请求接口
• 添加路由后重新触发导航：让Vue Router在动态路由添加完成后，重新匹配当前路径

具体实现 #

首先在路由文件中添加一个全局标记，记录动态路由是否已加载：

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';

let isDynamicRoutesLoaded = false; // 标记动态路由是否已加载
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 你的静态路由，比如首页等
  ]
});

然后修改全局守卫的逻辑，使用async/await让导航等待请求完成，并在路由添加后重新执行导航：

router.beforeEach(async (to, from, next) => {
  if (!isDynamicRoutesLoaded) {
    try {
      // 等待接口请求完成
      const response = await fetch('http://localhost:8000/api/test/all');
      const data = await response.json();
      
      if (data) {
        // 批量添加动态路由
        data.forEach(route => {
          router.addRoute({
            path: `/${route.name}`,
            name: route.name,
            component: () => import('../views/TestView.vue')
          });
        });
        isDynamicRoutesLoaded = true;
        
        // 重新执行当前导航，此时动态路由已存在，能正确匹配
        next({ ...to, replace: true });
      } else {
        next();
      }
    } catch (err) {
      console.error('加载动态路由失败:', err);
      next();
    }
  } else {
    // 动态路由已加载，直接放行
    next();
  }
});

export default router;

为什么之前的代码无效？ #

你之前的beforeEach代码中，虽然在请求完成后调用了next()，但这时候第一次导航的路由匹配已经完成了——Vue Router在进入守卫前就已经尝试匹配现有路由表，找不到对应路径就直接返回空白。而通过next({ ...to, replace: true })重新触发导航，Vue Router会使用更新后的路由表重新匹配，就能找到刚添加的动态路由了。

额外提示 #

如果你的项目中有404路由，建议确保它是最后被匹配的（比如放在静态路由的末尾），或者在动态路由加载完成后再添加，避免刷新动态路由页面时先跳转到404。

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