深度解析Vue Router原理：实战指南与实用技巧

import Vue from 'vue'  
import Router from 'vue-router'  
Vue.use(Router)  
const router = new Router({routes:[]})  
export default router  
  
import router from './route'  
new Vue({  
    render: h => h(APP),  
    router  
})  

routes:[  
    {  
        path: '/',  
        component: () => import ('../views/index.vue')  
    },  
    {  
        path: '/second',  
        component: () => import ('../views/second.vue'),  
        childrens: [  
            {  
                path: '/seconde/article',  
                component: import ('../view/article.vue')  
            }  
        ]  
    }  
]  

import Link from './cLink'  
import View from './cView'  
var Vue  
  
class cRouter {  
  constructor(options) {  
        this.$options = options  
    this.courrentRoute = window.location.hash.slice(1) || '/'  
    //定义一个响应式的路由渲染数组  
        Vue.util.defineReactive(this,'routeMap',[])  
        // 遍历匹配路由  
    this.initRouterMap()  
    // 初始化route改变事件  
    this.initRouteChange()  
  }  
   
  initRouterMap(route) {  
        let routes = route || this.$options.routes  
        for (const routeItem of routes) {  
            if (this.courrentRoute === '/' && routeItem.path === '/') {  
                this.routeMap.push(routeItem)  
                return  
            }  
  
            if (  
            routeItem.path !== '/'  
            &&   
            this.courrentRoute.indexOf(routeItem.path) !== -1) {  
                this.routeMap.push(routeItem)  
                if (routeItem.childrens && routeItem.childrens.length > 0) {  
                    this.initRouterMap(routeItem.childrens)  
                }  
                return  
            }  
        }  
  }  
  
  initRouteChange() {  
    window.addEventListener('hashchange', this.routeChange.bind(this))  
    window.addEventListener('load', this.routeChange.bind(this))  
  }  
  
  routeChange() {  
        this.courrentRoute = window.location.hash.slice(1)  
        this.routeMap = []  
    this.initRouterMap()  
  }  
}  
  
function install(_Vue) {  
  Vue = _Vue  
  
  Vue.mixin({  
    beforeCreate() {  
      if (this.$options.crouter) {  
        Vue.prototype.$crouter = this.$options.crouter  
      }  
    },  
  })  
  
  Vue.component('router-link', Link)  
  
  Vue.component('router-view', View)  
}  
  
export default {  
  cRouter,  
  install,  
}  

export default {  
    render(h) {  
        // 将自身标记为一个router-view，避免和其他元素搞混  
        this.$vnode.data.routerView = true  
        let parent = this.$parent  
        //默认自己层级为0  
        let routeDeep = 0  
  
        while(parent) {  
            // 判断是否存在父元素并且父元素有值  
            const vodeData = parent.$vnode && parent.$vnode.data  
            if (vodeData) {  
                // 如果父router-view是true，则自身层级增加  
                if (vodeData.routerView) {  
                    routeDeep++  
                }  
            }  
            //继续寻找父元素，进行递归  
            parent = parent.$parent  
        }  
  
        let component = null  
        const route = this.$crouter.routeMap[routeDeep]  
        if (route) {  
            component = route.component  
        }  
        return h(component)  
    }  
}  

export default {  
    props: {  
        to: {  
            type: String,  
            default: '/',  
        },  
    },  
    render(h) {  
        return h(  
            'a',  
            { attrs: { href: `#${this.to}` } },  
            this.$slots.default  
        )  
    }  
}