手写VueRouter

Posted 2021-06-05 michael_yqs

手写VueRouter

• • 定义VueRouter类
  • 实现静态方法install
  • 存储路由对应的组件
  • 处理router-link,router-view
  • 浏览器前进后退事件处理

定义VueRouter类

export default class VueRouter {
//构造函数中把参数存储下来
constructor(options) {
    this.options = options
    this.routeMap = {}//用于存储路由对应的view组件
    const cur =
      (this.options.mode === 'history'
        ? location.pathname
        : location.href.split('#')[1]) || '/'/*当前路由
若是history模式，则直接取pathname，否则解析出#后面的内容作为路由*/
    this.data = _Vue.observable({
      current: cur,
    })
}

实现静态方法install

在里面需要判断插件是否安装，安装了则什么也不做，否则注入实例

static install(vue) {
    //判断当前插件是否已安装
    if (VueRouter.install.isinstalled) {
      return
    }
    VueRouter.install.isinstalled = true
    //把vue构造函数记录到全局变量
    _Vue = vue
    //把创建vue实例时传入的router对象注入到vue实例上
    _Vue.mixin({
      beforeCreate() {
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router
          this.$options.router.init()
        }
      },
    })
  }
  init() {
    this.createRouteMap()//建立路由和view的映射关系
    this.initComponents(_Vue)//component渲染
    this.initEvent()//浏览器事件处理
  }

存储路由对应的组件

//解析路由规则为键值对形式，存储到实例的routemap 中
  createRouteMap() {
    this.options.routes.forEach((route) => {
      this.routeMap[route.path] = route.component
    })
  }

处理router-link,router-view

initComponents(Vue) {
    let self = this
    Vue.component('router-link', {
      props: {
        to: String,
      },
      render(h) {
        return h(
          'a',
          {
            attrs: {
              href: this.to,
            },
            on: {
              click: this.handleClick,//绑定事件
            },
          },
          [this.$slots.default],
        )
      },
      methods: {
        handleClick(e) {
          if (self.options.mode === 'history') {
            history.pushState({}, '', this.to)
            this.$router.data.current = this.to
          } else {
            location.hash = this.to
            this.$router.data.current = this.to.split('#')[1]
          }

          e.preventDefault()
        },
      },
      //template: '<a :href="to"><slot></slot></a>',
    })

    Vue.component('router-view', {
      render(h) {
        let component = self.routeMap[self.data.current]
        return h(component)
      },
    })
  }

浏览器前进后退事件处理

根据不同模式监听不同的浏览器事件

//注册事件
  initEvent() {
    //history模式
    if (this.options.mode === 'history') {
      window.addEventListener('popstate', () => {
        this.data.current = location.pathname
      })
    } else {
      //hash模式
      window.addEventListener('hashchange', () => {
        this.data.current = location.hash.substring(1)
      })
    }
  }