[JavaScript知识库]vue-router原理剖析之自行实现router

vue-router原理剖析, 一边讲解原理一边自己实现.看完绝对能让大家有所收获

我们正常使用router, 是在router.js里配置options, 并抛出Router实例

import Vue from 'vue'
import Router from 'vue-router'
// 引入Router
Vue.use(Router)

const routes = [
    {
        path: '/',
        name: 'home'
    }
]
// 抛出实例
export default new Router({
    routes
})

然后在main.js中挂载Router实例

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 将带有配置项的Router实例挂载到Vue实例上
new Vue({
    router,
    render: h => h(App)
}).$mounted('#app)

我们可以看到 一切的起点在于

import Router from 'vue-router'
Vue.use(Router)

分析第一步, import进来什么东西, 或者说Vue插件是什么样的形式.

答案是?函数或对象?并且里面一定有一个?install方法

引入进来之后 Vue.use就是调用函数中的intall方法, 并且传入Vue构造函数, 为什么要传入呢, 因为方便我们修改Vue的原型, 起到扩展的作用

下面用自己的代码写一个router类

let Vue;
class MiniRouter {
}
// 首先挂载install方法
MiniRouter.install = funciton(_Vue) {
    Vue = _Vue
}
export default MiniRouter

现在已经能被引用了, 但还没有任何功能, 我们想一下router都有什么功能

1. 可以在Vue里使用this.router操作页面
2. 可以使用<router-linke>标签和<router-view>标签
3. 在url发生变化时, 页面内容发生变化

首先先来说第一点, 让vue可以在组件中使用this.router, this.route, 那么就需要在this上挂载这两个对象

如何去挂载? 我们很容易就能想到

Vue.prototype.$router = {}
Vue.prototype.$route = {}

可不能是个空对象吧 应该是有相关配置的实例才对啊, 那么问题很明显, 我们需要Router实例

再来看一下router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router) // 在这里执行的install方法
const routes = [
    {
        path: '/',
        name: 'home'
    }
]
export default new Router({ // 在这里创建的Router实例
    routes
})

也就是说在install的时候我们还没有Router实例, 所以我们的目的是延时执行挂载代码,等到创建Router实例之后再执行. router的解决方案是利用Vue的全局混入, mixin, 这里很巧妙. 因为创建Vue实例时, 会把Router实例挂载到自身的options上 我们可以在组件里用this.$options.router访问

let Vue;
class MiniRouter {
}
// 首先挂载install方法
MiniRouter.install = funciton(_Vue) {
    Vue = _Vue
    Vue.mixin({ // mixin中的函数在触发组件生命周期时才会执行, 此时已可以使用this, 指向组件实例
        beforeCreate() { 
            // 混入到beforeCreate生命周期中, 每个组件的这个生命周期都会执行, 但这显然不对
            // 我们只需要在根组件里执行一次挂载操作 我们可以利用this.$options.router, 
            // 因为只有根组件才会有
            if(this.$options.router) {
                Vue.prototype.$router = this.$options.router
            }   
        }
    })
}
export default MiniRouter

至此我们已经挂载了router实例到vue的$router上, 但没有任何功能

接下来看第二点, 挂载全局组件<router-linke>和<router-view>

// 首先挂载install方法
MiniRouter.install = funciton(_Vue) {
    Vue = _Vue
    Vue.mixin({ // mixin中的函数在触发组件生命周期时才会执行, 此时已可以使用this, 指向组件实例
        beforeCreate() { 
            // 混入到beforeCreate生命周期中, 每个组件的这个生命周期都会执行, 但这显然不对
            // 我们只需要在根组件里执行一次挂载操作 我们可以利用this.$options.router, 
            // 因为只有根组件才会有
            if(this.$options.router) {
                Vue.prototype.$router = this.$options.router
            }   
        }
    })
    // 注意正常项目中只能用render函数, 不能使用template
    // 因为正常项目是runtime环境,没有编译器, 走的是webpack的vue-loader
    Vue.component('router-link', {
        // <router-link to="about">jump</router-link>
        props: {
            to: { // 接受to属性, 必传参数
                type: String,
                required: true
            }
            
        }
        render(h) {
            // h即createElement, 返回vnode
            // router-link默认为a标签, 利用 this.$slots.default拿到标签中间的内容, 叫默认插槽
            // a标签应有href 跳转to指定地址, 
            return h('a', {
                 attrs: {
                     href: '#' + this.to
                 }
            }, this.$slots.default)
        }
    })
}

<router-link>实现了, 接下来是<router-view>

router-view思路其实也简单, 其实就是通过地址匹配路由, 找到组件, 这个步骤在MiniRouter中完成

let Vue;
class MiniRouter {
    constructor(options) {
        // 传入的options中包含路由配置信息, 保存下来, 这样实例可以拿到配置
        this.$options = options
        // 接下来需要监听hashchange事件, 并做出相应
        // 如何做出响应? 我们需要一个响应式的数据, 通过改变这个数据的值, 做出响应
        // 我们这里使用defineReactive
        Vue.util.defineReactive(
            this, // MiniRouter构造函数
            'current', // 通过改变这个字段的值做出响应
            window.location.hash.slice(1) || '/' , 初始值
        )
              
        window.addEventListener('hashchange', () => {
            // 拿到的hash前面带'#', slice处理, 去掉'#', 保存下来, 默认值为‘/’
            this.curremt = window.location.hash.slice(1) || '/' 
        })
    }
}

此时已经可以响应url的变化了

Vue.component('router-view', {
    render(h) {
        let component = null; 
        // this.$router就是我们之前在Vue.prototype上挂载的Router实例 
        // 通过Router实例能获取到上一步保存的options
        // options里面有new实例的时候传入的routes配置表
        // 查找与上一步保存的当前path相同的项
        const router = this.$router.$options.routes
                            .find(route => route.path === this.$router.current)
        if (route) {
            // 如果有相同的 取出component组件
            component = route.component
        }
        // 渲染匹配的组件, 没有匹配到, 则默认值null, 不渲染
        return h (component)
    }
})

此时已经可以通过点击<router-link>切换path, 并渲染不同的组件了