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

see311
  • 384

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对象么?

回复
阅读 5.8k
2 个回答
✓ 已被采纳

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

各种哦也
  • 3
新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏