Vue路由未注册问题：新增路由无法显示且跳转失效

1. 核对路由配置的注册逻辑 #

打开router/index.js，确认新路由已正确加入路由数组，且路由实例正常导出：

// router/index.js 示例（Vue2 + Vue Router3）
import Vue from 'vue'
import Router from 'vue-router'
import AffiliateLinks from '@/components/AffiliateLinks' // 务必确认组件路径正确

Vue.use(Router)

export default new Router({
  routes: [
    // 其他已有路由
    {
      path: '/affiliate-links/client',
      name: 'AffiliateLinks', // 建议添加name属性，方便跳转和识别
      component: AffiliateLinks
    }
  ]
})

如果是Vue3 + Vue Router4，要确认createRouter方法的routes参数里包含这条路由，且实例正确导出。

2. 确认路由实例已注入根Vue实例 #

检查main.js，确保路由实例被正确挂载：

// main.js 示例（Vue2）
import Vue from 'vue'
import App from './App'
import router from './router' // 导入路径要和路由文件位置匹配

new Vue({
  el: '#app',
  router, // 这里必须注入路由实例，否则全局路由功能失效
  components: { App },
  template: '<App/>'
})

// Vue3 示例
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

3. 检查根组件是否存在<router-view> #

路由匹配的组件必须通过<router-view>渲染，若根组件（或对应层级父组件）缺少这个标签，路由切换不会有任何反馈，DevTools也无法识别路由：

<!-- App.vue 示例 -->
<template>
  <div id="app">
    <router-view/> <!-- 必须存在此标签，否则路由组件无处渲染 -->
  </div>
</template>

4. 修正v-card的:to属性配置 #

确保:to的取值格式正确：

• 直接用路径字符串：

<v-card :to="'/affiliate-links/client'">点击跳转</v-card>

• 用路由对象（推荐，带参数时更可靠）：

<v-card :to="{ name: 'AffiliateLinks' }">点击跳转</v-card>

如果v-card不支持:to属性（部分版本Vuetify可能存在此情况），可以用<router-link>包裹：

<router-link to="/affiliate-links/client">
  <v-card>点击跳转</v-card>
</router-link>

5. 清除缓存并重启开发服务 #

旧的打包缓存可能导致路由配置不生效，关闭开发服务器，清除浏览器缓存后重新启动服务。

6. 检查Vue DevTools的路由面板 #

确保Vue DevTools切换到路由标签页，且当前选中的是应用的主Vue实例（页面存在多个Vue实例时容易选错）。

内容的提问来源于stack exchange，提问作者Fi Li Ppo