添加动态路由时Vue Router出现警告：未找到路径"/test"的匹配位置

我在Vue项目中动态添加了一条路由，功能可正常使用，但控制台始终收到警告：No match found for location with path "/test"。

相关代码 #

main.js #

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import TestView from './views/TestView.vue'

const app = createApp(App)

app.use(router)

router.addRoute(
    {
      path: '/test', component: TestView
    }
)

router.beforeEach(async (to, from, next) => {
  console.error(to);
  next();
  if (to.matched.length == 0) {
    // router.push({ path: to.fullPath })
    // we could also use this.$route or useRoute()
    router.replace(to.fullPath)
  }
})

app.mount('#app')

App.vue #

<nav>
  <RouterLink to="/">Home</RouterLink>
  <RouterLink to="/about">About</RouterLink>
  <a href="/test"><b>Test Dynamic Route</b></a>
</nav>

警告截图 #

问题原因 #

1. 路由注册时机滞后：router.addRoute在app.use(router)之后执行，此时Vue Router已完成初始化并开始匹配当前路径，动态路由还未被注册，导致初次匹配失败触发警告。
2. 原生a标签跳转导致页面刷新：使用<a href="/test">会触发浏览器刷新，页面重启后Vue Router重新初始化，动态路由未注册就开始匹配路径，再次触发警告。
3. 全局守卫逻辑错误：beforeEach中先调用next()完成路由跳转，之后再执行router.replace，此时路由已完成跳转，该操作无效且干扰路由匹配流程。

解决方案 #

1. 提前注册动态路由 #

将router.addRoute移至app.use(router)之前，确保路由在Vue Router初始化前完成注册：

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import TestView from './views/TestView.vue'

// 先注册动态路由
router.addRoute({
  path: '/test', 
  component: TestView
})

const app = createApp(App)
app.use(router)

// 修正全局守卫逻辑
router.beforeEach(async (to, from, next) => {
  if (to.matched.length === 0) {
    // 可替换为实际的404页面路径
    next('/404')
  } else {
    next()
  }
})

app.mount('#app')

2. 使用<RouterLink>替代原生a标签 #

修改App.vue中的跳转链接，使用Vue Router提供的<RouterLink>避免页面刷新：

<nav>
  <RouterLink to="/">Home</RouterLink>
  <RouterLink to="/about">About</RouterLink>
  <RouterLink to="/test"><b>Test Dynamic Route</b></RouterLink>
</nav>

3. 移除无效的重复跳转逻辑 #

删除原beforeEach中next()之后的router.replace代码，仅保留必要的路由存在性判断，避免干扰正常路由流程。

内容的提问来源于stack exchange，提问作者Ersin Güvenç