vue-router1.x实现

本文主要是介绍vue-router1.x实现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

/**
 * 1、实现并生命了全局注册的组件，分别是router-link、router-view
 * 2、实现install： this.$router.push()
 */

/**
 * vue插件怎么写
 * 1）function/对象
 * 2）要求必须又一个install方法
 */
let Vue; // 保存Vue的构造函数，在插件中使用
class VueRouter {
  constructor(options) {
    this.$options = options
    // 把this.current变为响应式的数据
    // 将来数据一旦发生变化，router-view的render函数能够重新执行
    let initial = window.location.hash.slice(1) || '/'
    Vue.util.defineReactive(this, "current", initial)
    window.addEventListener('hashchange', () => {
      this.current = window.location.hash.slice(1) || '/'
    })
  }
}

VueRouter.install = (_Vue) => {
  Vue = _Vue
  // 挂载$router属性 this.$router.push
  // 全局混入：（延迟下面的逻辑到router创建完毕，并且附加到选项上时才执行
  Vue.mixin({
    beforeCreate () {
      // 注意此钩子在每个组件创建实例的时候都会调用
      // 根实例才有该选项
      if (this.$options.router) {
        Vue.prototype.$router = this.$options.router
      }
    },
  })

  // 实现router-link router-view
  // <router-link to="/">Home</router-link>
  // 转为：<a href="/"></a>
  Vue.component('router-link', {
    props: {
      to: {
        type: String,
        required: true
      }
    },
    render (h) {
      return h('a', {
        attrs: {
          href: `#${this.to}`
        }
      }, this.$slots.default)
    }
  })
  Vue.component('router-view', {
    render (h) {
      let component = null
      // 获取当前路由所对应的组件，并将它渲染出来
      const current = this.$router.current
      const route = this.$router.$options.routes.find(route => route.path === current)
      if (route) {
        component = route.component
      }
      return h(component)
    }
  })
}

export default VueRouter

这篇关于vue-router1.x实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！