VueRouter 实现原理

模拟vue-router的history模式。

前置知识：

• vue
  • 插件
  • 混入
  • Vue.observable() 创建一个响应式的对象，可以在vue实例中同步更新使用它的位置。
  • 插槽
  • render函数
  • 运行时和完整版的 Vue
• History API

原理

vue-router是前端路由，当路径切换的时候，在浏览器端判断当前路径，并加载当前路径对应的组件。

Hash 模式

• URL 中 # 后面的内容（锚点的值）作为路由地址
  • 可以直接通过location.href切换浏览器中的地址
  • 如果只改变了 # 后面的内容，浏览器不会向服务器发送请求这个地址，但是会将这个地址添加到浏览器的history 记录中
• 监听 hashchange 事件
  • hash改变后，触发hashchange事件，作出相应的处理
    • 记录当前路由地址
• 根据当前路由地址找到对应的组件，重新渲染

History 模式

history模式地址就是个普通的 URL 地址

• 通过 history.pushState() 方法改变地址栏
  • pushState方法仅仅改变地址栏，并将当前地址添加到history记录中
  • 并不会真正的跳转到访问路径，即不会向服务端发送请求
• 监听 popstate 事件
  • 可以监听到浏览器地址操作的变化，并作出相应处理
    • 记录改变后的地址
  • 注意，popstate事件的触发条件：
    • 当调用pushState或replaceState改变地址时，并不会触发popstate事件
    • 只有做出浏览器动作时才会触发，例如：
      • 点击浏览器前进后退按钮
      • 调用history.back 或 history.forward 方法
• 根据当前路由地址找到对应的组件，重新渲染

VueRouter 模拟实现-分析

回顾核心代码

这是使用 Vue CLI创建的应用模板，稍后替换vue-router为自己定义的模块去测试。

// router/index.js
// 注册插件
Vue.use(VueRouter)
// 创建按路由对象
const router = new VueRouter({routes: [{ name: 'home', path: '/', component: homeComponent }]
})// main.js
// 创建 Vue 实例，注册 router 对象
new Vue({router,render: h => h(App)
}).$mount('#app')

1. VueRouter 是一个插件，需要使用Vue.use注册
   1. Vue.use接收一个参数
      1. 参数为函数：会执行这个函数
      2. 参数为对象：会执行这个对象的install方法
   2. VueRouter是一个对象，所以需要内部实现一个install方法
2. new创建一个 VueRouter 实例
   1. 所以VueRouter应该是一个构造函数 或 类
   2. 构造函数结构一个对象参数，里面传入路由规则
      1. 路由规则核心要记录的是对应的 路径path 和 组件component
3. 创建Vue实例，构造函数参数中传入 VueRouter 实例对象

总结：

1. VueRouter应该是个类，内部应该有一个install的静态方法。
2. VueRouter构造函数结构一个对象参数，里面传入路由规则

UML类图

首先通过类图整理VueRouter类需要定义的成员。

类图分为三部分：

（+表示public，#表示protected，-表示private，_开头表示static）

1. 类的名称
   1. VueRouter
2. 类的属性
   1. options 记录构造函数中传入的对象
      1. 包含一个routes对象（route路由规则）
   2. routeMap 用来记录路由地址和组件的对应关系
      • 将来会将路由规则解析到routeMap
   3. data 一个包含current的响应式的对象
      • current 用于记录当前路由地址
      • 响应式目的：路由地址发生变化后，对应的组件要自动更新
        • 通过Vue.observable()方法将data转化为响应式对象
3. 类的方法
   1. Constructor 构造函数
      1. 初始化类的属性
   2. install 用于实现vue的插件机制
      1. 包括注入router对象，以及调用一些初始化方法
   3. init 用于调用 initEvent initRouteMap initComponents方法
   4. initEvent 用于注册popstate事件，用于监听浏览器历史的变化
   5. initRouteMap 用于初始化routeMap属性
      1. 它把构造函数中传入的路由规则，转化为键值对的形式，存储到routeMap对象中
         1. key：路由地址
         2. value：对应的组件
      2. 在<router-view>组件中会使用到routeMap
   6. initComponents 用于创建<router-view> 和 <router-link> 组件

VueRouter - init

使用Vue CLI创建应用模板，在此基础上替换vue-router插件。

// import VueRouter from 'vue-router'
import VueRouter from '../vuerouter'

init方法用于包装一些初始化方法

// /src/vue-router/index.js
export default class VueRouter {init () {// this.initRouteMap()// this.initComponents(_Vue)// this.initEvent()}
}

VueRouter - install

Vue.use调用install方法时会传递两个参数：

1. Vue：Vue的构造函数
2. Options：可选的选项对象（当前不需要）

install中需要做的事情：

1. 判断当前插件是否已经被安装
2. 把Vue的构造函数添加到全局变量中
   1. 因为install方法是一个静态方法
   2. 将来在VueRouter的实例中还要使用Vue
      1. 例如在initComponents中创建组件时，需要调用Vue.component
3. 把创建Vue实例时传入的router对象，注入到 所有 Vue实例上，例如：this.$router
   1. 所有的组件也都是Vue实例，也需要被注入
   2. 想要所有的实例共享一个成员，应该把它设置到构造函数的原型(prototype)上
   3. 在install内部获取创建Vue实例时传入的$options对象，需要用到 混入 mixin
      1. 因为install内部的this不是指向Vue实例，因而获取不到创建Vue实例时传入的$options对象
      2. mixin 可以为所有vue实例/组件定义一个混入对象，当vue实例/组件被使用时，混入对象的选项将被“混合”进该实例/组件本身的选项。
         1. 同名数据对象合并，以实例/组件数据为先
         2. 同名钩子函数合并为一个数组，全部被调用，混入对象的钩子将在实例/组件自身钩子之前调用
         3. 值为对象的选项，例如methods、components等，将被合并为同一个对象，同名冲突时，以实例/组件为先。
      3. 在mixin中定义一个beforeCreate钩子，在钩子函数中为Vue实例注入router对象
         1. 因为beforeCreate的调用者是Vue实例，所以它内部的this就指向Vue实例
4. 调用一些初始化方法
   1. 在向Vue实例注入router对象的时候，调用router对象的初始化方法
      1. 初始化routeMap
      2. 注册组件
      3. 注册事件

// /src/vue-router/index.js
let _Vue = nullexport default class VueRouter {static install (Vue) {// 1. 判断当前插件是否已经被安装if (VueRouter.install.installed) {return}// 创建一个用于记录插件是否被安装的变量VueRouter.install.installed = true// 2. 把Vue构造函数记录到全局变量_Vue = Vue// 3. 把创建Vue实例时传入的router对象注入到所有Vue实例上// 混入_Vue.mixin({beforeCreate () {// Vue实例的$options中才有router，组件中没有传递router对象// 混入的beforeCreate会在 实例 和 组件 中都调用// 所以需要判断如果是实例才注入，避免组件也会执行，导致无意义的执行if (this.$options.router) {_Vue.prototype.$router = this.$options.routerthis.$options.router.init()}}})}init () {// this.initRouteMap()// this.initComponents(_Vue)// this.initEvent()}
}

VueRouter - 构造函数

构造函数接收Options对象参数，最终返回VueRouter对象。
构造函数中需要初始化3个属性：

• options 记录构造函数传入的Options对象
• routeMap 由route规则解析的，以path为key，以component为value的键值对对象，<router-view>组件会通过这个对象找到对应的组件
• data 一个包含当前路由地址（current，默认为当前路径）的响应式对象，通过Vue.observable将其转化为响应式对象

constructor (options) {this.options = optionsthis.routeMap = {}this.data = _Vue.observable({current: window.location.pathname})
}

VueRouter - initRouteMap

该方法的作用是将构造函数中传入的route规则转化为键值对的形式，存储到routeMap对象，以方便当路由地址发生变化时，很方便的根据routeMap对象找到对应的组件。

• key：路由地址
• value：路由地址对应的组件

initRouteMap () {// 遍历所有的路由规则，把路由规则解析成键值对的形式，存储到routeMap中this.options.routes.forEach(route => {this.routeMap[route.path] = route.component})
}

VueRouter - initComponents - router-link

initComponents 方法用于创建<router-link>和<router-view>组件。

创建组件使用Vue.component()

<router-link to="/">Home</router-link>
// 渲染为
<a href="/">Home</a>

• router-link 组件最终渲染成一个超链接
  • 链接地址是参数to传递的字符串
    • 接收参数使用props
  • 文本内容是router-link标签包裹的文本
    • 使用插槽（slot）获取文本
  • 使用template渲染一个超链接

// 通过参数传递Vue构造函数的目的是减少这个函数和外部的依赖
initComponents (Vue) {Vue.component('router-link', {props: {to: String},template: '<a :href="to"><slot></slot></a>'})
}

此时在init方法中放开initRouteMap和initComponents的调用，运行项目有两个报错：

1. 未注册<router-view>组件，此报错暂时忽略
2. You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
   1. 您使用的是Vue的仅运行时版本，其中模板编辑器不可用。可以使用预编译把模板编译成render函数，或者使用编译器版本的Vue。

报错原因参考本文档中的 [【Vue 的构建版本】](#Vue 的构建版本)

Vue 的构建版本

Vue 的构建版本包含 运行时版 和 完整版。

• 运行时版(runtime)：不支持template模板，需要打包的时候提前编译。
• 完整版：包含运行时和编译器，（因为多了一个编译器，所以）体积比运行时版大 10k 左右。
  • 编译器的作用：在程序运行的时候把模板转换成 render 函数。
  • 性能不如运行时版本

Vue CLI创建的项目，默认使用的是 运行时版本。

官方文档参考

下面介绍解决方案。

VueRouter - 完整版的Vue

参考Vue CLI官方文档 - 配置参考

Vue CLI默认使用运行时版本，想要修改Vue CLI的配置，需要在项目根目录创建一个vue.config.js的配置文件。

在配置中开启 runtimeCompiler 选项。

• Default: false
• 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。

现在就解决了之前的版本错误。

VueRouter - 运行时版本的Vue - render

运行时版本的Vue不带编译器，也就是不支持组件中的template选项。

而编译器的作用，就是将template编译成render函数。

运行时版本的Vue中，可以在组件中直接编写render函数，以实现不需要编译器。

当前项目中的单文件组件（.vue文件）可以使用template，是因为在运行时对其进行了打包，打包过程中将其编译成了render函数，这叫做预编译pre-compile。

下面演示如果编写render函数，注意删除上面完整版的配置文件。

render函数接收一个 createElement 方法作为参数，一般命名为h，h方法用于创建虚拟DOM。

render函数中调用h方法创建虚拟DOM，并将结果返回。

Vue选项中如果包含 render 函数，则Vue构造函数就不会从 template 选项或 通过 el 选项指定的挂载元素中提取处 HTML 模板编译 render 函数。

【渲染函数 render-function】 参考官方文档 【渲染函数 & JSX】

// 通过参数传递Vue构造函数的目的是减少这个函数和外部的依赖
initComponents (Vue) {Vue.component('router-link', {props: {to: String},// template选项需要编译器支持// template: '<a :href="to"><slot></slot></a>'// 直接编写render函数render (h) {return h('a', {attrs: {href: this.to}}, [this.$slots.default])}})
}

VueRouter - initComponents - router-view

router-view组件相当于一个占位符。

router-view组件内容要根据当前路由地址获取对应的路由组件，并渲染到router-view的位置上。

vue的createElement（h）函数还可以直接将一个组件转化成虚拟DOM。

// 通过参数传递Vue构造函数的目的是减少这个函数和外部的依赖
initComponents (Vue) {Vue.component('router-link', {props: {to: String},render (h) {return h('a', {attrs: {href: this.to}}, [this.$slots.default])}})const self = thisVue.component('router-view', {render (h) {// 此处this指向Vue实例，所以要从外部获取指向VueRouter实例的this// 也可以使用this.$routerconst component = self.routeMap[self.data.current]return h(component)}})
}

VueRouter - initComponents - 跳转处理

此时根目录地址的router-view中的内容可以正常显示，点击router-link链接可以实现跳转（暂时未实现router-view更新）。

但是跳转过程发现页面进行了服务器请求，因为当前router-link编译成一个超链接，点击超链接默认会向服务器发送请求。

而在单页应用的history模式中进行“跳转”，不希望向服务器发送请求。

所以现在需要实现几件事情:

1. 取消超链接默认跳转，避免向服务器发送请求。
   1. 为这个超链接注册一个点击事件，取消超链接后续任务（跳转）的执行
2. 变更地址栏上的地址为超链接href属性上的地址，但不要向服务器发送请求。
   1. 使用history.pushState方法实现
3. 重新渲染新地址对应的内容
   1. 将当前地址更新到this.data.current中
   2. 由于this.data是响应式对象，所以它的变更会同步到router-view组件的render函数中，从而实现视图的更新。

initComponents (Vue) {Vue.component('router-link', {props: {to: String},render (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// 阻止默认行为e.preventDefault()}}})const self = thisVue.component('router-view', {render (h) {const component = self.routeMap[self.data.current]return h(component)}})
}

VueRoute - initEvent

该方法中注册popstate事件。

以上实现的内容，当操作浏览器的前进后退时，根目录/以外的地址不会正常渲染对应组件的内容。

这是因为没有对这些操作进行相应的处理。

所以需要使用popstate监听历史地址发生变化，从而加载对应的组件。

注意：pushState 和 replaceState方法不会触发popstate事件。

popstate事件要做的事情：

1. 把当前地址栏上的地址取出来
   1. 只需要路径部分，即location.pathname
2. 这个路径部分就是路由地址，将其存储在this.data.current中，实现视图更新

initEvent () {window.addEventListener('popstate', () => {// 当前使用箭头函数，this指向VueRouter实例this.data.current = window.location.pathname})
}

此时操作前进后端，视图会跟着变化。

到此 vue-router 简单模拟完成。