Vue-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')

実際、2 番目と 3 番目のステップは非常に明確で、VueRouter オブジェクトをインスタンス化し、この VueRouter オブジェクトをルートコンポーネント App にハングすることです。次に、最初のステップの Vue.use(VueRouter) の目的は何なのかという疑問が生じます。 ? 実際には、これはVue.use(XXX)実行XXXメソッドinstall、つまりVue.use(VueRouter) === VueRouter.install()ですが、この時点では、それが実行されることはわかっていますが、それが何であるかはinstallまだわかりません。installは何のためにあり、何に使用されますか?

VueRouter オブジェクトがルートコンポーネント App にアタッチされているため、アプリは VueRouter オブジェクトのメソッドを直接使用できることはわかっていますが、たとえば、VueRouter のメソッドを確実に使用したいことはわかっていますが、現在はアプリのみが使用でき每一个用到的组件ますthis.$router.push。これらの方法をどうすればよいでしょうか? 各コンポーネントはどのように使用できるのでしょうか? このときinstall、このメソッドが役に立ちます。最初に実装アイデアについて話し、それからコードを書きましょう。

vue-router は、各 vue コンポーネントが $router にアクセスできることをどのように認識しますか。これは、vue install に mix-in を記述することで実現されます。

スクリーンショット 2021-09-25 pm 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-router ソースコードの最初の読み取り

おすすめ