vue-router实现原理

Posted 2021-03-21 ygunoil

vue-router实现原理

近期面试，遇到关于vue-router实现原理的问题，在查阅了相关资料后，根据自己理解，来记录下。
我们知道vue-router是vue的核心插件，而当前vue项目一般都是单页面应用，也就是说vue-router是应用在单页面应用中的。
那么，什么是单页面应用呢？在单页面应用出现之前，多页面应用又是什么样子呢？

单页面应用与多页面应用

单页面

即 第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。

原理是：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

多页面

即 每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。
原理是：传统的页面应用，是用一些超链接来实现页面切换和跳转的

其实刚才单页面应用跳转原理即 vue-router实现原理

vue-router实现原理

原理核心就是 更新视图但不重新请求页面。

vue-router实现单页面路由跳转，提供了三种方式：hash模式、history模式、abstract模式，根据mode参数来决定采用哪一种方式。

路由模式

vue-router 提供了三种运行模式：
● hash: 使用 URL hash 值来作路由。默认模式。
● history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
● abstract: 支持所有 javascript 运行环境，如 Node.js 服务器端

Hash模式

hash即浏览器url中#后面的内容，包含#。hash是URL中的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会加载相应位置的内容，不会重新加载页面。
也就是说

• 即#是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中，不包含#。
• 每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。

所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。

History模式

HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面；

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: ‘history‘",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

有时，history模式下也会出问题：
eg:
hash模式下：xxx.com/#/id=5 请求地址为 xxx.com,没有问题。
history模式下：xxx.com/id=5 请求地址为 xxx.com/id=5，如果后端没有对应的路由处理，就会返回404错误；

为了应对这种情况，需要后台配置支持：
在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

abstract模式

abstract模式是使用一个不依赖于浏览器的浏览历史虚拟管理后端。
根据平台差异可以看出，在 Weex 环境中只支持使用 abstract 模式。 不过，vue-router 自身会对环境做校验，如果发现没有浏览器的 API，vue-router 会自动强制进入 abstract 模式，所以 在使用 vue-router 时只要不写 mode 配置即可，默认会在浏览器环境中使用 hash 模式，在移动端原生环境中使用 abstract 模式。 （当然，你也可以明确指定在所有情况下都使用 abstract 模式）。

具体更加详细的文章，请参考：
Vue番外篇 -- vue-router浅析原理
vue-router的原理

hash模式
hash模式背后的原理是onhashchange事件

因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来，后来人们给它起了一个霸气的名字叫前端路由，成为了单页应用标配。

在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，仅hash符号之前的url会被包含在请求中所以没有问题.

 

history模式
通过history api，我们丢掉了丑陋的#，但是它也有个毛病：
不怕前进，不怕后退，就怕刷新，f5，（如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。）,因为刷新是实实在在地去请求服务器的,不玩虚的。

 history模式下，前端的url必须和实际向后端发起请求的url一致，如http://abc.com/user/id,后端如果没有对user/id的路由处理，将返回404错误。 

 

vue-router底层实现方式

 

2.1实例化 Vue/Vue组件创建

new Vue({
router,
template: `
<div id="app">
<h1>Basic</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/foo">/foo</router-link></li>
<li><router-link to="/bar">/bar</router-link></li>
<router-link tag="li" to="/bar">/bar</router-link>
</ul>
<router-view class="view"></router-view>
</div>
`
}).$mount(‘#app‘)? 

 

 

2.2执行 vue-router 注入的 beforeCreate 钩子函数

通过Vue.mixin()

// ...
Vue.mixin({
beforeCreate () {
// 判断是否有 router
if (this.$options.router) {
// 赋值 _router
this._router = this.$options.router
// 初始化 init
this._router.init(this)
// 定义响应式的 _route 对象
Vue.util.defineReactive(this, ‘_route‘, this._router.history.current)
}
}
})? 

 

具体来说，首先判断实例化时 options 是否包含 router，如果包含也就意味着是一个带有路由配置的实例被创建了，此时才有必要继续初始化路由相关逻辑。然后给当前实例赋值_router，这样在访问原型上的 $router 的时候就可以得到 router 了。

下边来看里边两个关键：router.init 和 定义响应式的 _route 对象。

 

2.3执行 router.init(vm)
router.init 
然后来看 router 的 init 方法就干了哪些事情

（注册了对地址变更的监听，history.setupListeners()）

依旧是在 src/index.js 中：

/* @flow */
import { install } from ‘./install‘
import { createMatcher } from ‘./create-matcher‘
import { HashHistory, getHash } from ‘./history/hash‘
import { HTML5History, getLocation } from ‘./history/html5‘
import { AbstractHistory } from ‘./history/abstract‘
import { inBrowser, supportsHistory } from ‘./util/dom‘
import { assert } from ‘./util/warn‘
export default class VueRouter {
// ...
init (app: any /* Vue component instance */) {
// ...
this.app = app
const history = this.history
if (history instanceof HTML5History) {
history.transitionTo(getLocation(history.base))
} else if (history instanceof HashHistory) {
history.transitionTo(getHash(), () => {
window.addEventListener(‘hashchange‘, () => {
history.onHashChange()
})
})
}
history.listen(route => {
this.app._route = route
})
}
// ...
}
// ...? 

 

可以看到初始化主要就是给 app 赋值，针对于 HTML5History 和 HashHistory 特殊处理，因为在这两种模式下才有可能存在进入时候的不是默认页，需要根据当前浏览器地址栏里的 path 或者 hash 来激活对应的路由，此时就是通过调用 transitionTo 来达到目的；

 

而且此时还有个注意点是针对于 HashHistory 有特殊处理，

2.3.1为什么不直接在初始化 HashHistory 的时候监听 hashchange 事件呢？
答：这个是为了修复vuejs/vue-router#725这个 bug 而这样做的，

原因是因为在初始化的时候如果此时的 hash 值不是以 / 开头的话就会补上 #/，这个过程会触发 hashchange 事件，所以会再走一次生命周期钩子，也就意味着会再次调用 beforeEnter 钩子函数。即beforeEnter 钩子就会被触发两次。

 

2.3.2transitionTo 方法的大概逻辑
在 src/history/base.js 中：

/* @flow */
import type VueRouter from ‘../index‘
import { warn } from ‘../util/warn‘
import { inBrowser } from ‘../util/dom‘
import { runQueue } from ‘../util/async‘
import { START, isSameRoute } from ‘../util/route‘
import { _Vue } from ‘../install‘
export class History {
// ...
transitionTo (location: RawLocation, cb?: Function) {
// 调用 match 得到匹配的 route 对象
const route = this.router.match(location, this.current)
// 确认过渡
this.confirmTransition(route, () => {
// 更新当前 route 对象
this.updateRoute(route)
cb && cb(route)
// 子类实现的更新url地址
// 对于 hash 模式的话 就是更新 hash 的值
// 对于 history 模式的话 就是利用 pushstate / replacestate 来更新
// 浏览器地址
this.ensureURL()
})
}?

 

2.hashchange 或者路由跳转时，执行 history.transitionTo(...)，在这个过程中，会进行地址匹配，得到一个对应当前地址的 route，然后将其设置到对应的 vm._route上。updateRoute.

 

只是进行了赋值，

2.3.3为什么 vm 就可以感知到路由的改变了呢？
答案在 vue-router 注入 Vue 的 beforeCreate 钩子函数中：

Vue.util.defineReactive(this, ‘_route‘, this._router.history.current)
采用与 Vue 本身数据相同的“数据劫持”方式，这样对 vm._route 的赋值会被 Vue 拦截到，并且触发 Vue 组件的更新渲染流程。

 

2.4视图更新
地址变更如何同步视图更新？

接上一步，vm._route 已经接收到路由的变更，从而触发视图更新。而当视图更新进一步调用到 <router-view> 的 render() 时，即进入了 <router-view> 的处理。

<router-view> 的 render() 采用函数调用（h()）模式，而非通过模板生成。这也是 Vue2 支持的定义组件渲染逻辑的方式，类似 React 的 render()。

采用这种模式的好处是

可以完全利用 JavaScript 的能力来编写逻辑，不必受制于 Vue 的类 HTML 模板语法。

这里的主要处理逻辑是从根组件中取出当前的路由对象（parent.$route），然后取得该路由下对应的组件，然后交由该组件进行渲染：

return h(component, data, children)

这其中还涉及 <router-view> 嵌套的处理，不过主要逻辑就是这样了。

 

小结
vue-router 以插件方式“侵入”Vue，从而支持一个额外的 router 属性，以提供监听并改变组件路由数据的能力。这样每次路由发生改变后，可以同步到数据，进而“响应式”地触发组件的更新。

<router-view> 作为根组件下的子组件，从根组件那里可以获取到当前的路由对象，进而根据路由对象的组件配置，取出组件并用其替换当前位置的内容。这样，也就完成整个路由变更到视图变更的过程。

① 路由变更到视图变更的过程整理为：

hashchange
-->
match route
-->
set vm._route
-->
<router-view> render()
-->
render matched component
② 实现过程中的技术点包括：

Vue 插件机制
响应式数据机制
Vue 渲染机制
地址变更监听
 
————————————————
版权声明：本文为CSDN博主「chenzeze0707」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chenzeze0707/article/details/90287466