请收藏-手把手教你写VueRouter

Vue-Router提供了俩个组件 router-link router-view， 提供了俩个原型上的属性$route $router ，我现在跟着源码来把它实现一下
开始

先看平时使用的 Vue-Router ,引入Router , Vue.use 注册插件。直接从这里开始入手
使用场景
复制代码

import Vue from ‘vue’
import Router from “…/vue-router”
import routes from ‘./routes’
Vue.use(Router)
let router = new Router({
routes
})

复制代码
index

先看vue-router.js文件,先生成一个VueRouter类，然后导入install方法，因为Vue-Router的install方法比Vuex复杂一些，所以将install单独作为一个文件。
复制代码

import install from ‘./install’;

class VueRouter {
constructor(options) {

}

}
VueRouter.install = install;

export default VueRouter

复制代码

Vue.use()

来先看 Vue.use()的源码中的一部分，这里面判断注册的插件里的install是不是一个函数，有就执行插件里的install函数。或者判断插件本身是不是一个函数，有就执行插件本身。这里本质上是没有区别，有没有install都可以。而VueRouter使用了install，目的是为了将install作为入口函数，方便封装，同时也将install和其他代码分开。

if (typeof plugin.install === ‘function’) {
plugin.install.apply(plugin, args)
} else if (typeof plugin === ‘function’) {
plugin.apply(null, args)
}

install

上述已经将vue-router的类构建好，现在VueRouter实例已经有了，然后执行vue.use(),然后会执行VueRouter类里的install函数,那来看install.js。
install里使用了Vue.mixin，混入代码，下面代码是在当前组件生命周期beforeCreate里混入代码，代码逻辑是判断当前组件是否为根组件，如果是则将_routerRoot作为键放入当前组件中，值为Vue实例。再将_router作为键放入当前组件中，值为VueRouter实例。然后执行初始化操作。

如果不为当前组件不是根组件，则该组件为根组件的子组件。将_routerRoot作为键放入当前组件中，值为父组件的_routerRoot,从父亲身上获取.

$route和$router是利用Object.definePropert代理_routerRoot里的_router和_route，访问到的。
接着注册全局组件router-view和router-link
复制代码

import RouterView from ‘…/components/router-view’
import RouterLink from ‘…/components/router-link’

const install = (_Vue, s) => {