VueRouter类图
    image.png

    1. let _Vue = null
    3. export default class VueRouter {
    4.   static install (Vue) {
    5.     // 1.判断当前插件是否已经被安装
    6.     if (VueRouter.install.installed) {
    7.       return
    8.     }
    9.     VueRouter.install.installed = true
    10.     // 2.把vue构造函数记录到全局变量
    11.     _Vue = Vue
    12.     // 3.把创建Vue实例时候传入的router对象注入到Vue实例上
    13.     // 混入
    14.     _Vue.mixin({
    15.       beforeCreate () {
    16.         if (this.$options.router) {
    17.           _Vue.prototype.$router = this.$options.router
    18.           this.$options.router.init()
    19.         }
    20.       }
    21.     })
    22.   }
    24.   constructor (options) {
    25.     this.options = options
    26.     // 把options中的route路由规则存储到routeMap中（键值对的形式）
    27.     this.routeMap = {}
    28.     // 创建响应式对象，可以直接用在渲染函数或者计算属性中
    29.     this.data = _Vue.observable({
    30.       // 存储当前的路由地址，默认模式下时/
    31.       current: '/'
    32.     })
    33.   }
    35.   init () {
    36.     this.createRouteMap()
    37.     this.initComponent(_Vue)
    38.     this.initEvent()
    39.   }
    41.   createRouteMap () {
    42.     // 遍历所有的路由规则，把路由规则解析成键值对的形式，存储到routeMap中
    43.     this.options.routes.forEach((route) => {
    44.       this.routeMap[route.path] = route.component
    45.     })
    46.   }
    48.   initComponent (Vue) {
    49.     // 注册组件router-link
    50.     Vue.component('router-link', {
    51.       props: {
    52.         to: String
    53.       },
    54.       // template: '<a :href="to"><slot></slot></a>'
    55.       // h函数帮助我们创建虚拟dom
    56.       render (h) {
    57.         return h('a', {
    58.           // dom对象
    59.           attrs: {
    60.             href: this.to
    61.           },
    62.           on: {
    63.             click: this.clickHandler
    64.           }
    65.         }, [this.$slots.default])
    66.       },
    67.       methods: {
    68.         clickHandler (e) {
    69.           history.pushState({}, '', this.to)
    70.           this.$router.data.current = this.to
    71.           e.preventDefault()
    72.         }
    73.       }
    74.     })
    76.     // 注册组件router-view
    77.     const self = this
    78.     Vue.component('router-view', {
    79.       render (h) {
    80.         const component = self.routeMap[self.data.current]
    81.         return h(component)
    82.       }
    83.     })
    84.   }
    86.   initEvent () {
    87.     window.addEventListener('popstate', () => {
    88.       this.data.current = window.location.pathname
    89.     })
    90.   }
    91. }