Vue3+Vue Router4在created中加动态路由首次加载首页报404如何解决

问题根本原因 #

• Vue应用初始化的执行顺序为：创建Router实例 → 触发首次导航匹配 → 初始化根组件 → 执行根组件created生命周期
• 你在根组件created中调用addRoute添加路由时，首次路由匹配流程已经执行完毕，自然找不到对应路径的路由规则，因此触发404或匹配警告。后续应用内导航触发时路由已经完成注册，所以功能恢复正常。

可行解决方法 #

方案1：全局路由前置守卫拦截（推荐）

你之前使用守卫未生效大概率是踩了「注册完路由直接调用next()未重新匹配」的坑，正确逻辑如下：

1. 定义变量标记路由是否完成注册
2. 首次导航时拦截请求，拿到API返回的路由数据后完成动态注册
3. 重新触发当前导航的匹配流程，再放行

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

const router = createRouter({
  history: createWebHistory(),
  // 此处仅保留无需动态加载的公共路由，例如登录页
  routes: [{ path: '/login', component: () => import('@/views/Login.vue') }]
})

let isRouteRegistered = false
router.beforeEach(async (to, from, next) => {
  // 路由已注册直接放行
  if (isRouteRegistered) return next()
  // 请求API获取动态路由配置
  const asyncRoutes = await fetch('/api/route-config').then(res => res.json())
  // 批量注册动态路由
  asyncRoutes.forEach(route => router.addRoute(route))
  // 注意：404通配符路由必须放在所有动态路由注册完成后再添加，否则会拦截动态路由
  router.addRoute({ 
    path: '/:pathMatch(.*)*', 
    name: 'NotFound', 
    component: () => import('@/views/NotFound.vue') 
  })
  isRouteRegistered = true
  // 重新触发当前路由匹配，replace设为true避免留下无效历史记录
  next({ ...to, replace: true })
})

export default router

方案2：延迟应用挂载

如果不需要保留首屏加载前的路由逻辑，可以等路由注册完成后再挂载根应用，从根源避免匹配时机问题：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

async function initApplication() {
  // 先请求注册动态路由
  const asyncRoutes = await fetch('/api/route-config').then(res => res.json())
  asyncRoutes.forEach(route => router.addRoute(route))
  router.addRoute({ path: '/:pathMatch(.*)*', name: 'NotFound', component: () => import('@/views/NotFound.vue') })
  // 路由全部注册完成后再挂载应用
  createApp(App).use(router).mount('#app')
}

initApplication()

注意事项 #

• 如果使用Vue2，路由注册API调整为router.addRoutes(asyncRoutes)（复数方法支持批量传入），其余逻辑完全一致
• 动态路由的component字段需正确配置懒加载引入逻辑，不要使用字符串路径映射

内容的提问来源于stack exchange，提问作者Senate No. 7