Vue-router | 实现简单路由

日常开发中积累了不少可能对少量开发有帮助的简单易用的组件，好记性不如烂笔头，想对过去的少量零零乱乱的东西做少量总结，反省自己的同时也便于思考少量更优的方法，提升下开发思维??????。
代码传送门（??感觉有作用的的同学帮忙点下???）

效果截图

完美实现了一个简单的路由效果

router.gif

核心代码

主要结构包括VueRouter类和install方法（install方法主要由Vue.use(...)来自动触发该方法，是插件的必经之路。）

let Vue = null; // 用来保存传进来的Vue函数class VueRouter {  constructor(options) {    this.$options = options;     this.routeMap = {};     this.app = new Vue({      data: {        current: '/'      }    })  }  init () {    this.listenURL()    // 创立路由映射    this.createRouteMap(this.$options)    // 初始化组件    this.initComponent()  }  listenURL () {    window.addEventListener('load', this.onHashChange.bind(this), false)    window.addEventListener('hashchange', this.onHashChange.bind(this), false)  }  createRouteMap (options) {    options.routes.forEach(element => {      this.routeMap[element.path] = element    });  }  initComponent () {    // 全局注册组件router-link/router-view    Vue.component('router-link', {      props: {        to: String      },      render (h) {        console.log(this.$slots.default)        return h('a', {          attrs: {            href: '#' + this.to          }        }, [this.$slots.default])      }    })    Vue.component('router-view', {      render: h => {        var component = this.routeMap[this.app.current].component        return h(component)      },    })  }  onHashChange () {    this.app.current = window.location.hash.slice(1) || '/'  }}VueRouter.install = function (_Vue) {  Vue = _Vue   console.log('install')  Vue.mixin({    beforeCreate () {      console.log(this.$options.router)      if (this.$options.router) {        Vue.prototype.$router = this.$options.router        this.$options.router.init()      }    }  })}export default VueRouter

代码块分析

constructor函数：构造方法，创立路由对象的时候调用该方法，将配置项传递进来

  constructor(options) {    this.$options = options; // 用来保存routes等配置项    this.routeMap = {}; // 用来保存路由关系映射    // 利用Vue的响应式,路由改变触发其余条件（渲染组件）    this.app = new Vue({      data: {        current: '/'      }    })  }

install函数：Vue.use(…)会触发该方法，并把Vue传入

VueRouter.install = function (_Vue) {  Vue = _Vue    // 全局混入，在生命周期中做少量扩展操作  Vue.mixin({    beforeCreate () {      if (this.$options.router) {        // 1.将创立Vue对象中传入的router挂载在根组件上        Vue.prototype.$router = this.$options.router        // 2.触发init方法        this.$options.router.init()      }    }  })}

listenURL函数：监听地址的变化

  listenURL () {  // 监听初始化加载完成时候    window.addEventListener('load', this.onHashChange.bind(this), false) // 监听URL #后面的地址变化    window.addEventListener('hashchange', this.onHashChange.bind(this), false)  }

createRouteMap函数：保存传入的routes

  createRouteMap (options) {    // 取出所有routes中的元素,以path为键作映射    options.routes.forEach(element => {      this.routeMap[element.path] = element    });  }

initComponent函数：通过h函数渲染router-link和router-view组件

 initComponent () {    // 全局注册组件router-link/router-view    Vue.component('router-link', {      props: {        to: String      },      render (h) {        return h('a', {          attrs: {            href: '#' + this.to          }        }, [this.$slots.default])      }    })    Vue.component('router-view', {      render: h => {      // 获取对应的组件进行渲染        var component = this.routeMap[this.app.current].component        return h(component)      },    })  }

使用

在使用上和vue-router一模一样，但是该代码仅可用hash模式

关键点

解决自己设置组件，肯定要对vue中的传值比较清晰理解，这里就不逐个列举。在这里主要使用的少量技术包括：

后续会持续升级其余少量有用的组件提供参考…