使用vue-router的时候在new Vue({router})传入router的作用？

Question

main.js

import Vue from 'vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

在main.js里创建Vue实例的时候new Vue({router})传入router的实例的作用是什么？
是为了给Vue的原型链上添加router对象么？

Answer 1

如果你读过vue-router 与 vuex的源码你就会知道原因
这个是为了让你可以在子组件里面递归找到路由单例,
因为vue实例化的时候, 默认把参数挂在了自身上, 结合组件会形成一颗组件树,
其他组件想找到路由就要都去定点找然后挂在自己身上,
接下来我也会写相关的文章 可以关注一下互相学习

Answer 2

当然是为了让你能使用this.$router,你可以试一下如果不传这个在你的程序中this变量还有没有$router属性。