一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

前言

vue单页面应用程序中，url发生变化的时候，不能及时的刷新，显示对应视图内容；

1.spa页面不能刷新

hash #/my
History api/about

2.根据url显示对应的内容

router-view
数据响应式：current变量持有url地址;一旦发生变化，动态重新执行render

分析实现

VueRouter实例类的组装和分析

url发生变化的时候不能及时刷新，所以咱们需要处理路由选项，监控url变化（hashchange），最后相应这个变化。

引用构造函数，vuerouter中需要使用

let Vue;

创建vueRouter类 constructor即指的是其构造函数，因为它指向的是构造函数的本身，是创建、初始化class的方法，它在一个函数中的prototype中

class VueRouter {
  constructor(options) {
  this.$options = options;
  }
}

instal方法的实现

VueRouter中加入有一个install方法，并注册$router Vue = _Vue这里需要引用构造函数，vuerouter中要使用这个

VueRouter.install = function(_Vue) {
    Vue = _Vue;
}

挂载$router 在vue中混入beforeCreate()方法（即在创建初始化后混入）

Vue.mixin({
    beforeCreate() {
        if (this.$options.router) {
          Vue.prototype.$router = this.$options.router;
        }
    }
})

挂载router-link组件并导出

Vue.component('router-link', Link)
export default VueRouter;

在初始化的beforeCreate()时候，如果router不为空，把当前路由挂在到$router原型上

router-link

router-link的分析大家熟知，router-link组件承担这跳转路由和传参等作用，所以必不可少的参数有路由和参数，在props中定义接收参数to、required权限

export default {
    props:{
        to:String,
        required:true
    }
}

渲染router-link 在render方法中接收渲染函数，我这里用的原生渲染方式这样更适配。 attrs定义属性，和名称和return <a href={'#'+this.to}>{this.$slots.default}</a>;写法一样。

render(h) {
      return h('a', {
        attrs: {
          href: '#' + this.to
        }
        }, [
          this.$slots.default
        ])
      }
  }

this.$slots.default为引用后插槽内数据，即标签内文字标识

router-view

监控URL的变化

定义响应式current属性，监听hashChange事件

获取当前hash的第一位，利用Vue.util.defineReactive监听current的执行者

class VueRouter{
    constructor(options) {
        const initial = window.location.hash.slice(1) || '/'
        Vue.util.defineReactive(this, 'current', initial)
    }
}

监听hashchange事件在上述constructor构造函数内监听hashchange事件，并绑定this

window.addEventListener('hashchange', this.onHashChange.bind(this))
window.addEventListener('load', this.onHashChange.bind(this))

定义监听事件方法

onHashChange() {
    this.current = window.location.hash.slice(1)
}

动态获取对应的组件如果当前的路由地址等于current的地址，那么就渲染的组件地址对应的路由。

export default {
  render(h) {
  // 获取对应组件
  let component = null;
  const route = this.$router.$options.routes.find(route => route.path ===
  this.$router.current)
    if(route) {
      component = route.component
      return h(component);
    }
  }
 }

提前处理路由表提前处理避免每次都循环，并缓存path和route映射关系

this.routeMap = {}
this.$options.routes.forEach(route => {
    this.routeMap[route.path] = route
});

总结

看到这里也就结束了，请各位掘友多多指教。这里是一个简单的自定义路由并没有嵌套功能，请多阅读源码。

实现vue-router的自定义插件的开发

前言