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中的传值比较清晰了解，这里就不一一列举。在这里主要使用的一些技术包括：

技术	概述	备注
mixin	全局混入	此处是混入到Vue的生命周期中
h函数	相当于createElement	此处是创建两个路由组件
hashchange	监听地址栏地址变化	/
install方法	Vue.use(...)触发	插件核心方法

后续会持续更新其他一些有用的组件提供参考...