Vue Router深扒实现原理

目录

• 回顾Vue Router的核心代码
• 代码实现
• 创建Vue-Router插件
• 构造函数
• 完整代码

Vue Router官网

前置知识：插件、slot插槽、mixins混入、render函数、运行时和完整版的Vue

回顾Vue Router的核心代码

// 注册插件
// Vue.use() 内部调用传入对象的 install 方法
Vue.use(VueRouter)
// 创建路由对象
const router = new VueRouter({
  routes: [
    { name: 'home', path: '/', component: homeComponent }
  ]
})
// 创建 Vue 实例，注册 router 对象
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

注意，上述版本为Vue Router 3.x，用法与最新版的有所不同，但理解了其核心设计思路后，再去手写Vue4也是得心应手。

Vue功能的强大就在于它的插件机制，use可以接受两种参数——函数和对象。如果是函数的话，则会直接调用这个函数，如果是对象的话，则会调用对象的install方法。

代码实现

创建Vue-Router插件

let _Vue = null
export default class VueRouter {
  static install(Vue) {
    // 1. 判断插件是否已经安装，如果是的话，直接返回
    if (Vue.install.installed) return
    Vue.install.installed = true
    // 2.将Vue的构造函数记录在全局
    _Vue = Vue
    // 3.把创建Vue的实例传入的router对象注入到Vue实例
    _Vue.mixin({
      beforeCreate() {
        // 判断是否是实例，如果是实例就不用添加
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router
        }
      },
    })
  }
}

构造函数

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

将options中的路由规则存放到routeMap中

// 注意，下面的代码只考虑了path和component对应，name同理，也可加上路由元信息，或者遍历加上children，但为便捷及个人水平考虑，并未完整实现
createRouteMap() {
  // 遍历所有的路由规则，把路由股则解析成键值对的形式，存储到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. 判断插件是否已经安装，如果是的话，直接返回
    if (Vue.install.installed) return
    Vue.install.installed = true
    // 2.将Vue的构造函数记录在全局
    _Vue = Vue
    // 3.把创建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() {
    // 遍历所有的路由规则，把路由股则解析成键值对的形式，存储到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深扒实现原理的文章就介绍到这了,更多相关Vue Router内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！