Première lecture du code source de Vue-router

 

Pourquoi faut-il installdéfinir une méthode et lui affecter VueRouter? En fait, c'est Vue.uselié à la méthode, vous souvenez-vous encore comment Vue utilise 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')

En fait, les deuxième et troisième étapes sont très claires, qui consistent à instancier un objet VueRouter et à accrocher cet objet VueRouter sur le composant racine App. Ensuite, la question se pose, quel est le but de Vue.use(VueRouter) dans la première étape ? En fait , c'est la méthode d' Vue.use(XXX)exécution , c'est-à-dire Vue.use(VueRouter) === VueRouter.install() , mais à ce stade, nous savons qu'il sera exécuté, mais nous ne savons toujours pas ce qu'il est pour et à quoi ça sert ?XXXinstallinstallinstall

Nous savons que l'objet VueRouter est attaché au composant racine App, donc l'App peut utiliser directement les méthodes sur l'objet VueRouter, mais nous savons que nous devons vouloir utiliser les méthodes de VueRouter, par exemple, mais maintenant seule l' 每一个用到的组件App this.$router.pushpeut Que faire de ces méthodes ? Comment utiliser chaque composant ? À ce stade install, la méthode est pratique. Parlons d'abord de l'idée d'implémentation, puis écrivons le code.

 

Comment vue-router réalise-t-il que chaque composant vue peut accéder à $router, et cela est réalisé en écrivant mix-in dans vue install

 

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
      }
    }
  })
}