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
        )
    }
}

复制