自定义简单的vue-router

import Home from './views/Home'
import About from './views/About'
import Vue from 'vue'

class VueRouter {
  constructor(options) {
    this.$options = options
    this.routeMap = {}
    // 当前路由的响应式  和vue有强绑定
    this.app = new Vue({
      data: {
        current: '/'
      }
    })
  }

  init() {
    //  监听路由变化
    this.bindEvents()
    // 创建路由配置
    this.createRouteMap(this.$options)
    // 实现两个组件
    this.initComponent()
  }

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

  onHashChange() {
    this.app.current = window.location.hash.slice(1) || '/'
  }

  createRouteMap(options) {
    options.routes.forEach(item => {
      this.routeMap[item.path] = item.component
    })
  }

  initComponent() {
    Vue.component('router-link', {
      props: { to: String },
      render(h) {
        // h (tag ,data, children)
        return h('a', { attrs: { href: '#' + this.to } }, [this.$slots.default])
      }
    })
    Vue.component('router-view', {
      render: (h) => {
        // h (tag ,data, children)
        console.log('this.app.current：', this.app.current)
        const comp = this.routeMap[this.app.current]
        return h(comp)
      }
    })


  }
}

VueRouter.install = function (Vue) {
  // 混入
  Vue.mixin({
    beforeCreate() {
      // this  当前组件的实例
      if (this.$options.router) {
        // 仅在根组件执行一次
        Vue.prototype.$router = this.$options.router
        this.$options.router.init()
      }
    }
  })
}

Vue.use(VueRouter)


export default new VueRouter({
  routes: [{
    path: '/',
    name: 'home',
    component: Home
  },
    {
      path: '/about',
      name: '/about',
      component: About
    }]
})