为什么router-link在App.vue中正常，在自定义组件中报Failed to resolve component错误

排查方向 #

• 检查应用初始化时的注册顺序
  全局组件router-link、router-view是在执行app.use(router)时才完成全局注册的，如果你的自定义导航组件是全局注册的，要确保注册顺序是先注册路由实例，再注册自定义全局组件，示例正确顺序如下：

  import { createApp } from 'vue'
  import { createRouter } from 'vue-router'
  import App from './App.vue'
  import CustomNav from './components/CustomNav.vue'
  
  const app = createApp(App)
  const router = createRouter({
    // 你的路由配置
  })
  // 先注册路由
  app.use(router)
  // 再注册全局自定义组件
  app.component('CustomNav', CustomNav)
  app.mount('#app')
  

• 检查是否使用了自动导入组件的插件
  如果你项目中使用了unplugin-vue-components这类自动导入组件的插件，插件会默认跳过全局注册组件的识别，需要在插件配置中声明RouterLink、RouterView为全局组件，避免插件尝试导入不存在的本地组件，配置示例：

  // vite.config.js 中对应配置
  import Components from 'unplugin-vue-components/vite'
  
  export default defineConfig({
    plugins: [
      Components({
        dts: true,
        // 加入全局组件声明
        globalNames: ['RouterLink', 'RouterView']
      })
    ]
  })
  

• 检查自定义组件的编写语法
  如果你的自定义组件是用JSX/TSX编写的，全局注册的组件不会被自动识别，需要手动从vue-router中导入对应的组件再使用：

  import { RouterLink } from 'vue-router'
  // 在组件中直接使用<RouterLink to="/">Home</RouterLink>即可
  

• 检查是否存在多应用实例的情况
  如果你在项目中调用了多次createApp创建了多个独立应用实例，只有执行过app.use(router)的实例下的组件才能访问到router-link，如果自定义组件是注册到其他未挂载路由的实例上，就会抛出找不到组件的错误。

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