Vue 源码之手写Vue Router

源码地址:https://github.com/CONOR007/Handwritten-routing

一.Vue Router的两种模式

hash模式实现原理

URl中#后的内容作为路径地址
监听hashchange事件
根据当前路由地址找到对应的组件重新渲染

History模式实现原理

通过history.pushState()方法改变地址栏
监听popstate事件
根据当前路由地址找到对应组件重新渲染

二.Vue Router的使用

vue作为一个渐进式框架取决于它有强大的插件机制,通过注册对应的插件得到想要的功能.

Vue.use可以接受一个对象类,调用类中的静态方法install实现功能. 也可以接受一个函数并直接调用.

import Vue from 'vue'
import VueRouter from 'vue-router'
// 1. 注册路由插件
Vue.use(VueRouter)// 2. 创建 router 对象
const router = new VueRouter({routes
})new Vue({// 3. 注册 router 对象router,render: h => h(App)
}).$mount('#app')

类图

根据类图中提供的属性和方法去实现对应的功能,能让我们的目标更加清晰.

如上可见,这个名为VueRouter的类它有三个属性和六个方法.其中+号是对外公开的代码,_号是静态方法.

三个属性:

options属性是记录构造函数传入的对象,比如记录我们在new VueRouter的时候传入的routes对象规则;

routeMap是一个对象用来记录路由地址和组件的对应关系,将来我们会将options对应到routeMap中来.

data是通过vue.obsverber存储响应式数据的,因为路由地址更改过户对应的组件要更新. 它里边有一个属性current是用来记录当前路由地址的

六个方法:

install是一个静态方法,用来实现vue的插件机制;

Constructor构造函数是用来初始化对应的属性;

init用来初始化功能方法;

``initEvent`是用来注册popState事件监听浏览器历史的变化;

createRouteMap是用来初始化routeMap属性的把传入的路由规则转换成键值对的形式存储到routeMap中去,键是路由的地址,值是路由的组件;

initComponents是用来创建和这两个组件的.

三.具体实现

这里主要介绍实现历史模式,hash模式同理

`install`方法实现

install当Vue.use(VueRouter)时会被调用,它是一个静态方法,用来实现vue的插件机制,它接收一个Vue对象.通过Vue对象的mixin能在第一次实例化的时候拿到router.并实现路由方法的初始化.

let _Vue = null
export default class VueRouter {static install (Vue) {// 1.判断当前插件是否已经被安装if (VueRouter.install.installed) returnVueRouter.install.installed = true// 2.把Vue构造函数记录到全局变量_Vue = Vue// 3.把创建Vue实例时传入的router注入到_Vue上. 混入_Vue.mixin({beforeCreate () {if (this.$options.router) {// 创建的时候vue肯定是可以拿到router的 这个时候把它给_Vue的原型_Vue.prototype.$router = this.$options.routerthis.$options.router.init()}}})}init () {//初始化方法}
}

注意this.$options拿到的是Vue初始化时传入的对象.所以接下来我们在该类中实现的所有属性和方法都能在this.$options.router中拿到.

const vm = new Vue({router,render: h => h(App)}).$mount('#app')

`constructor`的实现

如下是截取路由规则与实例化代码部分代码

// 路由规则
const routes = [{path: '/',name: 'Index',component: Index},{path: '/blog',name: 'Blog',component: () => import(/* webpackChunkName: "blog" */ '../views/Blog.vue')},{path: '/photo',name: 'Photo',component: () => import(/* webpackChunkName: "photo" */ '../views/Photo.vue')}
]
const router = new VueRouter({mode: 'history',routes
})

constructor接收实例化路由对象时传进来的对象,它的作用是初始化属性.

options参数就是new VueRouter时传入的对象 { mode: 'history', routes},其中routeMap是一个对象用来记录路由地址和组件的对应关系.

constructor (options) {this.options = optionsthis.routeMap = {}// observable实现current的双向绑定this.data = _Vue.observable({current: '/'})
}

`createRouteMap`的实现

createRouteMap遍历路由规则,解析成键值对存储在routeMap中.键是路由的地址,值是路由的组件.

  createRouteMap () {this.options.routes.forEach(element => {this.routeMap[element.path] = element.component})}

initComponents的实现

initComponents主要创建路由中所用到的<route-link>和<route-view>这两个组件.使用.component创建组件,render渲染组件,h函数创建目标元素或生成虚拟DOM.clickHandler用来实现路由的跳转,在历史模式中主要用到HTML5的history.pushStateAPI ,作用是改变地址不会向服务端发起请求.

initComponents (Vue) {Vue.component('router-link', {props: {to: String},// template: '<a :href="to"><slot></slot></a>'render (h) {// h函数(生成的目标元素,目标元素属性,内容部分插槽)return h('a',{attrs : {href : this.to},on : {click:this.clickHandler},},[this.$slots.default])},methods: {clickHandler (e) {history.pushState({},'',this.to)this.$router.data.current = this.to//组织a标签的默认事件e.preventDefault();}},})const self = thisVue.component('router-view', {render(h) {// component 当前路由地址const component = self.routeMap[self.data.current]// h可以帮我们创建虚拟DOMreturn h(component)},})
}

这里要注意:完整版本的Vue支持template编译运行时不支持template如果要使用需要在vue.config.js中配置 runtimeCompiler 或者配置render函数

`initEvent`实现

initEvent用来注册popState事件监听浏览器历史的变化,也就是点击浏览器左上角回退时要更新组件

initEvent () {window.addEventListener('popstate',()=>{this.data.current = window.location.pathname})
}

`init`初始化方法

init () {this.createRouteMap()this.initComponents(_Vue)this.initEvent()
}

四.完整代码

let _Vue = null
export default class VueRouter {// install是一个静态方法,用来实现vue的插件机制static install (Vue) {// 1.判断当前插件是否已经被安装if (VueRouter.install.installed) {return}VueRouter.install.installed = true// 2.把Vue构造函数记录到全局变量_Vue = Vue// 3.把创建Vue实例时传入的router注入到_Vue上. 混入_Vue.mixin({beforeCreate () {// 只需要在实例化的时候执行if (this.$options.router) {// const vm = new Vue({//     注册 router 对象//     router,//     render: h => h(App)// }).$mount('#app')// 实例化的时候 new Vue中的对象都放在$options中去了. 所以该类中所有属性方法都能在this.$options.router中拿到._Vue.prototype.$router = this.$options.routerthis.$options.router.init()}}})}// 构造函数初始化 属性值constructor (options) {// options是实例化路由对象时传进来的对象// {//     mode: 'history',//     routes// }// 是记录构造函数传入的对象,比如记录我们在new VueRouter的时候传入的routes对象规则;this.options = options// 是一个对象用来记录路由地址和组件的对应关系,将来我们会将options对应到routeMap中来this.routeMap = {}// 通过vue.obsverber存储响应式数据的,因为路由地址更改过户对应的组件要更新. 它里边有一个属性current是用来记录当前路由地址的this.data = _Vue.observable({current: '/'})}init () {this.createRouteMap()this.initComponents(_Vue)this.initEvent()}// 遍历路由规则,解析成键值对存储在routeMap中createRouteMap () {this.options.routes.forEach(element => {// 键是路由的地址,值是路由的组件this.routeMap[element.path] = element.component})}// 创建<route-link>和<route-view>这两个组件initComponents (Vue) {Vue.component('router-link', {props: {to: String},// 注意:完整版本的Vue支持template编译 运行时不支持template如果要使用需要在vue.config.js中配置 runtimeCompiler 或者配置render函数// template: '<a :href="to"><slot></slot></a>'render (h) {// h函数(生成的目标元素,目标元素属性,内容部分插槽)return h('a', {attrs: {href: this.to},on: {click: this.clickHandler}}, [this.$slots.default])},methods: {clickHandler (e) {this.$router.mode(() => {history.pushState({}, '', this.to)this.$router.data.current = this.to}, () => {window.location.hash = this.to})// 组织a标签的默认事件e.preventDefault()}}})const self = thisVue.component('router-view', {render (h) {// component 当前路由地址const component = self.routeMap[self.data.current]// h可以帮我们创建虚拟DOMreturn h(component)}})}// initEvent 用来注册popState事件监听浏览器历史的变化initEvent () {const self = thiswindow.addEventListener('popstate', () => {this.mode(() => {self.data.current = window.location.pathname}, () => {})})window.addEventListener('hashchange', () => {this.mode(() => {self.data.current = window.location.pathname}, () => {if (self.data.current !== window.location.hash) self.data.current = window.location.hash.substr(1)})})}// 模式判断mode (his, mode) {if (this.options.mode === 'history') {his()} else if (this.options.mode === 'mode') {mode()}}
}

最后在路由中用上我们自己写的路由路径

...
import VueRouter from '../vueRouter/index.js' //这里
...