浅读vue-router源码，了解vue-router基本原理

Posted 2022-01-01 superlizhao

　　项目中使用vue-router的时候，会进行以下操作（可能具体不是这么写的，但是原理一样）：

1. 　　定义映射关系routes；
2. 　　定义router实例的时候传入vue和参数routes...；
3. 　　定义vue实例的时候，把router挂载到vue实例上。

　　

　　接下来看我们写一个极简版的router源码。

class VueRouter 
    constructor(Vue, options) 
        this.$options = options
        this.routeMap = 
        this.app = new Vue(
            data: 
                current: ‘#/‘
            
        )

        this.init()
        this.createRouteMap(this.$options)
        this.initComponent(Vue)
    

    // 初始化 hashchange
    init() 
        window.addEventListener(‘load‘, this.onHashChange.bind(this), false)
        window.addEventListener(‘hashchange‘, this.onHashChange.bind(this), false)
    

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

    // 注册组件
    initComponent(Vue) 
        Vue.component(‘router-link‘, 
            props: 
                to: String
            ,
            template: ‘<a :href="to"><slot></slot></a>‘
        )

        const _this = this
        Vue.component(‘router-view‘, 
            render(h) 
                var component = _this.routeMap[_this.app.current]
                return h(component)
            
        )
    

    // 获取当前 hash 串
    getHash() 
        return window.location.hash.slice(1) || ‘/‘
    

    // 设置当前路径
    onHashChange() 
        this.app.current = this.getHash()
    

　　constructor里接受参数option并作为成员属性保存下来。定义routeMap用来保存路由和组件的map结构。定义vue的实例app让current动态化。

　　初始化init()里监听浏览器的load和hashchange事件，当发生load和hashChange事件时触发onHashChange函数，并bind了this为当前路由器的实例。

　　onHashChange（）做的事情是获取地址栏里的地址赋值给current。

　　createRouteMap（）遍历传进来的options，生成routeMap

　　initComponent（）初始化router的组件<router-link/>,<router-view/>,把router-link渲染成一个a标签，<router-view> 用render函数渲染 则根据current和routeMap渲染当前路由对应的组件。