Vue3注册vue-router后组件this.$router为undefined的解决方法

DevOps 小满

2026-8-28

问题原因

Vue3 配套的 Vue Router 4.x 原生支持 Options API 下通过 this.$router、this.$route 访问路由实例和当前路由对象，你遇到的 undefined 问题完全是代码写法错误和配置异常导致的，核心问题有3个：

路由实例创建错误：createRouter 是工厂函数，直接调用即可返回路由实例，你代码里写的 new createRouter(...) 属于错误用法，会导致实例生成异常，无法在全局注册时正确挂载内置属性。
路由配置字段错误：单页面路由的组件配置字段是单数形式的 component，你写的复数形式 components 是命名视图场景专用字段，会导致路由匹配、渲染逻辑异常，间接影响路由属性挂载。
额外笔误：组件方法里写的 this.$route.push 本身逻辑错误，push 是路由实例（$router）的方法，$route 是存当前路由参数、路径的信息对象，本身没有push方法。

另外如果项目中残留了 Vue2 配套的 vue-router 3.x 版本依赖，就算配置写对也会出现属性挂载失败的问题。

修复步骤

按顺序调整以下代码即可：

修正路由初始化文件 ./routes/index.js
删掉createRouter前的new，把配置里的components改为单数component，路径建议统一以斜杠开头：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue';
// 其他页面组件引入
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes:[
      {component: Home, name:'home', path:'/home'},
      // 其余路由配置
    ]
})
export default router;

校正依赖版本
卸载旧版本路由，安装适配Vue3的4.x版本：

npm uninstall vue-router
npm install vue-router@4

修正入口文件main.js的注册逻辑
确保路由注册在应用挂载之前执行，不要漏掉应用挂载步骤：

import { createApp } from 'vue'
import App from './App.vue'
import router from "./routes/index.js"
const app = createApp(App)
app.use(router)
// 其余插件注册也需要放在mount之前
app.mount('#app')

修正组件内的方法笔误
把Home.vue里错误的this.$route.push改为调用$router实例的方法：

export default {
   name:'HomeComponent',
   data(){
      // 原有数据逻辑
   },
   methods:{
      goToRoute(name){
         this.$router.push({name:name});
      }
   },
   watch:{
       "$route.path" : function(newVal, oldVal){  
           // 原有监听逻辑可正常运行
        }
   }
}

补充说明

以上配置修正完成后，纯Options API写法的组件内，this.$router、this.$route访问、$route相关的监听写法都和Vue2行为完全一致，不需要额外改写逻辑。如果后续使用<script setup>语法糖，才需要改用useRouter、useRoute组合式API获取路由对象。

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