Vue Router深扒實現(xiàn)原理

更新時間：2022年09月09日 09:21:50 作者：ExMaterial

在看這篇文章的幾點要求：需要你先知道Vue-Router是個什么東西，用來解決什么問題，以及它的基本使用。如果你還不懂的話，建議上官網(wǎng)了解下Vue-Router的基本使用后再回來看這篇文章

回顧Vue Router的核心代碼

// 注冊插件
// Vue.use() 內(nèi)部調(diào)用傳入對象的 install 方法
Vue.use(VueRouter)
// 創(chuàng)建路由對象
const router = new VueRouter({
  routes: [
    { name: 'home', path: '/', component: homeComponent }
  ]
})
// 創(chuàng)建 Vue 實例，注冊 router 對象
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

注意，上述版本為Vue Router 3.x，用法與最新版的有所不同，但理解了其核心設計思路后，再去手寫Vue4也是得心應手。

Vue功能的強大就在于它的插件機制，use可以接受兩種參數(shù)——函數(shù)和對象。如果是函數(shù)的話，則會直接調(diào)用這個函數(shù)，如果是對象的話，則會調(diào)用對象的install方法。

代碼實現(xiàn)

創(chuàng)建Vue-Router插件

let _Vue = null
export default class VueRouter {
  static install(Vue) {
    // 1. 判斷插件是否已經(jīng)安裝，如果是的話，直接返回
    if (Vue.install.installed) return
    Vue.install.installed = true
    // 2.將Vue的構(gòu)造函數(shù)記錄在全局
    _Vue = Vue
    // 3.把創(chuàng)建Vue的實例傳入的router對象注入到Vue實例
    _Vue.mixin({
      beforeCreate() {
        // 判斷是否是實例，如果是實例就不用添加
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router
        }
      },
    })
  }
}

構(gòu)造函數(shù)

constructor(options) {
  this.options = options
  this.routeMap = {}
  this.data = _Vue.observable({
    current: '/'
  })
}

將options中的路由規(guī)則存放到routeMap中

// 注意，下面的代碼只考慮了path和component對應，name同理，也可加上路由元信息，或者遍歷加上children，但為便捷及個人水平考慮，并未完整實現(xiàn)
createRouteMap() {
  // 遍歷所有的路由規(guī)則，把路由股則解析成鍵值對的形式，存儲到routeMap中
  this.options.routes.forEach(route => {
    this.routeMap[route.path] = route.component
  })
}

初始化route-link和router-view兩個組件

initComponent(Vue) {
  Vue.component('router-link', {
    props: {
      to: String
    },
    // template: `<a :href="to" rel="external nofollow"  rel="external nofollow" ><slot></slot></a>`
    render(h) {
      return h("a", {
        attrs: {
          href: this.to
        },
        on: {
          click: this.clickhandler
        }
      }, [this.$slots.default])
    },
    methods: {
      clickhandler(e) {
        history.pushState({}, "", this.to)
        this.$router.data.current = this.to
        e.preventDefault();
      }
    },
  })
  const self = this
  Vue.component('router-view', {
    render(h) {
      const component = self.routeMap[self.data.current]
      return h(component)
    }
  })
}

瀏覽器回退、前進時頁面同時改變

initEvent(){
    window.addEventListener("popstate",()=>{
        this.data.current = window.location.pathname
    })
}

完整代碼

let _Vue = null
export default class VueRouter {
  constructor(options) {
    this.options = options
    this.routeMap = {}
    this.data = _Vue.observable({
      current: '/'
    })
    this.init()
  }
  static install(Vue) {
    // 1. 判斷插件是否已經(jīng)安裝，如果是的話，直接返回
    if (Vue.install.installed) return
    Vue.install.installed = true
    // 2.將Vue的構(gòu)造函數(shù)記錄在全局
    _Vue = Vue
    // 3.把創(chuàng)建Vue的實例傳入的router對象注入到Vue實例
    _Vue.mixin({
      beforeCreate() {
        // 判斷是否是實例，如果是實例就不用添加
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router
        }
      },
    })
  }
  init() {
    this.createRouteMap()
    this.initComponent(_Vue)
    this.initEvent()
  }
  createRouteMap() {
    // 遍歷所有的路由規(guī)則，把路由股則解析成鍵值對的形式，存儲到routeMap中
    this.options.routes.forEach(route => {
      this.routeMap[route.path] = route.component
    })
  }
  initComponent(Vue) {
    Vue.component('router-link', {
      props: {
        to: String
      },
      // template: `<a :href="to" rel="external nofollow"  rel="external nofollow" ><slot></slot></a>`
      render(h) {
        return h("a", {
          attrs: {
            href: this.to
          },
          on: {
            click: this.clickhandler
          }
        }, [this.$slots.default])
      },
      methods: {
        clickhandler(e) {
          history.pushState({}, "", this.to)
          this.$router.data.current = this.to
          e.preventDefault();
        }
      },
    })
    const self = this
    Vue.component('router-view', {
      render(h) {
        const component = self.routeMap[self.data.current]
        return h(component)
      }
    })
  }
  initEvent() {
    window.addEventListener('popstate', () => {
      this.data.current = window.location.pathname
    })
  }
}

到此這篇關于Vue Router深扒實現(xiàn)原理的文章就介紹到這了,更多相關Vue Router內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: