vue-router源码第一步阅读

2021-11-03 15:06:04 阅读：171 来源： 互联网

标签：Vue install vue 源码 VueRouter 组件 router

为什么必须定义一个install方法，并且把他赋予VueRouter呢？其实这跟Vue.use方法有关，大家还记得Vue是怎么使用VueRouter的吗？

import VueRouter from 'vue-router'

Vue.use(VueRouter) // 第一步

export default new VueRouter({ // 传入的options
    routes // 第二步
})

import router from './router'

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

其实第二步和第三步很清楚，就是实例一个VueRouter对象，并且将这个VueRouter对象挂到根组件App上，那问题来了，第一步的Vue.use(VueRouter)是干什么用的呢？其实Vue.use(XXX)，就是执行XXX上的install方法，也就是Vue.use(VueRouter) === VueRouter.install()，但是到了这，咱们是知道了install会执行，但是还是不知道install执行了是干嘛的，有什么用？

咱们知道VueRouter对象是被挂到根组件App上了，所以App是能直接使用VueRouter对象上的方法的，但是，咱们知道，咱们肯定是想每一个用到的组件都能使用VueRouter的方法，比如this.$router.push，但是现在只有App能用这些方法，咋办呢？咋才能每个组件都能使用呢？这时install方法派上用场了，咱们先说说实现思路，再写代码哈。

vue-router是如何实现每个vue组件都能访问$router的呢，通过vue的install中写入混入实现的

截屏2021-09-25 下午10.20.09.png

const VueRouter = {}
// eslint-disable-next-line no-unused-vars
var _vue
export default VueRouter.install = (Vue) => {
  _vue = Vue
  // 使用Vue.mixin混入每一个组件
  Vue.mixin({
    // 在每一个组件的beforeCreate生命周期去执行
    beforeCreate() {
      if (this.$options.myRouter) {
        // this 是 根组件本身
        this._myrouterRoot = this
        this.myRouter = this.$options.myRouter
      } else {
        // 非根组件，也要把父组件的_routerRoot保存到自身身上
        this._myrouterRoot = this.$parent && this.$parent.myRouter
        // 子组件也要挂上$router
        this.myRouter = this._myrouterRoot
      }
    }
  })
}

标签：Vue,install,vue,源码,VueRouter,组件,router
来源： https://blog.csdn.net/qq_27449993/article/details/121121061

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-router源码第一步阅读