Vue3中出现injection 'Symbol(router)' not found及路由push报错求助

常见原因及解决办法 #

• Vue Router未正确注入Vue实例
  这是最核心的原因。如果项目入口文件（main.js/main.ts）里没完成路由的挂载，组件根本拿不到路由实例。检查入口代码，必须包含以下关键步骤：

  // main.js 示例代码
  import { createApp } from 'vue'
  import { createRouter, createWebHistory } from 'vue-router'
  import App from './App.vue'
  import About from './views/About.vue' // 按需引入你的页面组件
  
  // 配置路由规则
  const routes = [
    { path: '/about', component: About }
  ]
  
  // 创建路由实例
  const router = createRouter({
    history: createWebHistory(),
    routes
  })
  
  const app = createApp(App)
  app.use(router) // 必须调用此方法将路由注入Vue应用
  app.mount('#app')
  

• useRouter导入方式不规范
  你当前用require("vue-router")导入，虽然CommonJS环境下能跑，但Vue3项目普遍用ES模块语法，建议改成：

  import { useRouter } from 'vue-router'
  

  这种写法更贴合Vue3生态，也能避免模块解析的潜在问题。

• 组件不在路由上下文范围内
  如果这个组件是直接挂载在#app下，而非通过<router-view>渲染的路由组件，useRouter()也无法获取到路由实例。确保你的组件是路由配置里的目标组件，或者嵌套在路由组件内部。

• 组件销毁后异步逻辑仍执行（可选优化）
  虽然你的setTimeout逻辑本身没问题，但如果组件在6秒内被销毁，router实例可能失效。可以加个清理逻辑：

  import { useRouter, onUnmounted } from 'vue-router'
  
  const router = useRouter()
  const timer = setTimeout(() => {
    router.push('/about')
  }, 6000)
  
  onUnmounted(() => {
    clearTimeout(timer)
  })
  

内容的提问来源于stack exchange，提问作者Sallah Eddine Laksari