vue-router原理分析与实践

vue-router原理分析与实践

今天大师兄跟大家简单聊聊Router的实现原理,以及我们如何去实现这样一个插件。

Vue RouterVue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
关于Vue Router的使用就不做过多介绍了,大家可以前往Vue Router官网去学习哦~

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

从上述代码可以看出,router也是作为一个插件去使用的,所以在进行原理实践时候,我们开发的就是一个插件。

插件开发思路

  • 定义一个Router类,用来进行所有的router操作。定义一个install方法,将router挂载到Vue的实例上去

  • 注册全局组件router-linkrouter-viewrouter-link组件解析为一个a标签,router-view解析为一个div标签,内容为当前路由对应的component

  • 监听hashchange事件来改变当前路由对应的component,监听load事件做同样的事情

  • 对于嵌套路由而言,在渲染router-view时候,先去判断当前router-view的深度,即当前router-view是处在哪个层级,然后在解析routes时候判断当前路由,如果当前路由和routes中某个路由都为’/'根路由,则直接放到路由渲染数组中,如果当前路由不是根路由,并且routes中的某个路由包含当前路由,则意味着routes数组中的这个路由要么是当前路由的父路由,要么就是当前路由,然后把routes数组中的这个路由放到路由渲染数组中去,放完之后如果还有childrens,递归去做就行。最后得到了一个路由匹配数组,这个数组里面包含当前路由和当前路由的父路由,并且数组中子路由的下标与之前router-view的层级下标相等,这样就能正确的将子路由的component正确的渲染到对应的router-view中去了。

譬如当前路由表如下:

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

此时second组件下有一个router-view,用来渲染子路由——article组件,在app下还有一个父router-view,用来渲染index、second组件,所以此时second组件下的router-view的层级是1(初始化为0)。如果此时浏览器访问路由 /second/article 时候,触发我们的路由匹配方法,遍历routes数组和当前路由对比,当前路由不是根路由,并且包含 /second 路由,所以path为 /second 的选项被push进入路由渲染数组中,然后此路由还有childrens,进行递归,好家伙,当前路由和 /second/article 完全相等,所以也被push到了渲染数组中。最后我们得到了一个数组,包含两个路由选项,父路由下标0,子路由下标1,之前我们也将router-view做了层级标记,这样就能得到子router-view对应渲染的component了。
~nice

插件开发

先来一个cRouter文件夹,下面搞一个index.js,里面就是我们传统的router使用,上面有,然后再搞一个crouter.js:

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

cview.js用来渲染router-view

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

cLink.js用来渲染router-link

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

文章到这里,我们简单实现了类似vue aouter路由的功能。

大师兄想说的是:如今开源框架大大方便了我们的开发效率,但是单纯的使用三方框架并不能让我们学到更多知识,我们应该是研究去探索他的实现原理以及设计理念,去思考如果让我们设计一个框架,我们需要掌握哪些知识,该如何设计?

我想,这样的学习才能学到更多的知识~

上一篇:javascript-用Jest和Typescript模拟一个全局对象


下一篇:Spark数据倾斜处理