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

Question

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

Answer 1

在vue-router文档中有清楚的解释：https://router.vuejs.org/en/api/route-object.html

The route object can be found in multiple places: Inside components as this.$route Inside $route watcher callbacks As the return value of calling router.match(location)

如果您想使用例如router.push()，根据你的代码，你绝对应该能够使用 this.$router.push()

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

vue component can not get this.$router from vue-router

vue.js

vue-router