定义:

 vue用来写路由一个插件。包括 router-link、router-view 两个组件, 其中 router-link 用于实现跳转,router-view 用于展示视图

 

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 渲染机制
  • 地址变更监听

 

结束

如果文章对你有帮助,麻烦点赞哦!一起走码农花路~

 

Logo

前往低代码交流专区

更多推荐