vue 组件无法从 vue-router 获取 this.$router

Posted 2023-02-22

【中文标题】vue 组件无法从 vue-router 获取 this.$router

【英文标题】：vue component can not get this.$router from vue-router

【发布时间】：2017-05-21 00:24:41

【问题描述】：

Vue组件获取不到this.$router，但在App组件中获取到this.$route，会是什么问题？

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import store from './store'

import FeedView from './views/FeedView.vue'
import LoginView from './views/LoginView.vue'

Vue.use(VueRouter)
Vue.config.devtools = true

const router = new VueRouter(
  mode: 'history',
  base: __dirname,
  routes: [
     path: '/', component: FeedView ,
     path: '/login', component: LoginView ,
  ]
)

new Vue(
  router,
  store,
  el: '#app',
  render: h => h(App)
)

capture image of vue-devtools

【参考方案1】：

vue-router 文档中有明确说明：https://router.vuejs.org/en/api/route-object.html

路由对象可以在多个地方找到： 像 this.$route 这样的内部组件 内部 $route 观察者回调 作为调用router.match(location)的返回值

如果你想使用例如router.push()，根据你的代码，你肯定可以使用this.$router.push()