Primera lectura del código fuente de Vue-router

 

install¿Por qué debe definirse y asignarse un método VueRouter? De hecho, esto está Vue.userelacionado con el método ¿Todavía recuerdas cómo Vue usa 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')

De hecho, el segundo y tercer paso son muy claros, que consisten en crear una instancia de un objeto VueRouter y colgar este objeto VueRouter en el componente raíz de la aplicación. Luego surge la pregunta: ¿cuál es el propósito de Vue.use (VueRouter) en el primer paso? ? De hecho , es el método de Vue.use(XXX)ejecución , es decir, Vue.use(VueRouter) === VueRouter.install() , pero en este punto, sabemos que se ejecutará, pero aún no sabemos qué es. para que sirve y para que sirve.XXXinstallinstallinstall

Sabemos que el objeto VueRouter está adjunto a la aplicación del componente raíz, por lo que la aplicación puede usar directamente los métodos en el objeto VueRouter, pero sabemos que debemos querer usar los métodos de VueRouter, por ejemplo, pero ahora solo la 每一个用到的组件aplicación this.$router.pushpuede ¿Qué hacer con estos métodos? ¿Cómo se puede utilizar cada componente? En este momento install, el método es útil. Hablemos primero sobre la idea de implementación y luego escribamos el código.

 

¿Cómo se da cuenta vue-router de que cada componente de vue puede acceder a $router, y se realiza escribiendo mix-in en 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
      }
    }
  })
}