Vue-Router原理分析-路由模式和install

Posted 2022-02-24 boykait

??单页应用(SPA, Single Page Application)的整个Web系统由一个html文件，通过Ajax和后端进行数据交互，通过一些特殊手段去加载渲染页面的不同部分，使得无需刷新整体页面，，就像使用app一样，极大的提升了用户使用体验，在Vue生态中，就是利用Vue的核心插件-Vue-Router来实现Web界面的路由跳转，so，本文就是通过学习Vue-Router，了解Vue-Router完成SPA开发的实现具体原理。

Web路由简介

??先简单说一下路由，早期Web系统路由主要是服务器后端实现，熟悉前后端开发的朋友就知道，在服务器端，通过路由表映射到相应的方法，并执行相应的动作，比如我们想要请求API数据、新页面、文件等：

"/" -> goHtml()

"/api/users" -> queryUsers()

??客户端实现路由主要就有两种方式:

1. 基于Web Url的hash
2. 基于Hishtory API

基于Web Url的hash

?? Url中的hash值是“#”号后面的参数值，比如http://www.example.com/index.html#location1里面的值localtion1, 主要有如下一些特性(之前看到公司项目的Url中带有“#”，虽然有点莫名，但都没去想想咋来的，汗)：

1. Url中#后的内容不会发送到服务器；
2. hash值的改变会保存到浏览器的历史浏览记录中，可通过浏览器的回退按钮查看；
3. hash值是可读写的，可通过window.location.hash获取到hash值，利用onhashchange监听hash值的变化(Vue-Router里的hash模式就是在onhashchange中的回调事件中完成路由到界面的更新渲染)。

基于Hishtory API

??基于hash模式虽然方便，但带有#号，有同学就会觉这样的Url有点丑啦，为了和同向服务器后端请求的Url风格保持一致，就可以使用Hishtory API模式了。使用基于Hishtory API主要是操作HTML5提供的操作浏览器历史记录API，可以实现地址无刷新更新地址栏，例如：

// pushState  state: 用于描述新记录的一些特性。
// 这个参数会被一并添加到历史记录中，以供以后使用。
// 这个参数是开发者根据自己的需要自由给出的。
// pushState作用相当于修改“#”后面的值
window.history.pushState(state, "title", "/userPage");
// 比如浏览器后退
window.addEventListener("popstate", function(e) 
    var state = e.state;
    // do something...
);
// 与pushState相对仅进行Url替换而不产生新的浏览记录的replaceState方法
window.history.replaceState(null, null, "/userPage");

两种模式对比

??我们来简单对比一下这两种模式的一些特点：

模式 VS	hash	Hishtory API
美观程度	公认略丑，带#号	相对美观
兼容性	好	需要浏览器支持HTML5
错误URL后端支持	否	是

??所以两种模式的使用要根据实际项目的需求来定了，接下来是重点啦，Vue-Router内部实现路由就是基于这两种模式！所以提前了解一下前端路由的两种模式算是打个预防针。

Vue-Router

?? 先回忆一下Vue-Router的使用的四步曲，：

import Vue from 'vue';
import VueRouter from 'vue-router'
// 1. 使用Vue-Router插件
Vue.use(VueRouter)
// 2. VueRouter实例化
const router = new VueRouter(
  model: 'history', // 路由模式 hash\history
  routes: [
    
      name: 'xx',
      path: 'path',
      component: component
    
  ]
);
// 3. 实例化Vue实例时使用该router路由
new Vue(
  ...
  router,
);

// 4. 通过Vue.$router.push('xx') 或 router-link进行路由跳转

??接下来，就逐次窥探上面四步曲中Vue-Router具体的一些实现细节。

使用Vue-Router插件

??Vue-Router遵循Vue插件的开发规范，通过调用Vue内部方法Vue.use()对VueRouter进行install(实际上是回调VueRouter中所定义的install方法)，这一过程完成了VueRouter的挂载工作。

-> vue\src\core\global-api\use.js
Vue.use = function (plugin: Function | Object) 
  ... 
  plugin.install.apply(plugin, args);
  ...

??回到VueRouter源码中，分析一下install过程的执行流程：

import View from './components/view'
import Link from './components/link'

export let _Vue

// install实现
export function install (Vue) 

  // 如果已注册实例，则返回
  if (install.installed && _Vue === Vue) return
  install.installed = true

  _Vue = Vue 

  const isDef = v => v !== undefined

  const registerInstance = (vm, callVal) => 
    // 父虚拟节点
    let i = vm.$options._parentVnode
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) 
      i(vm, callVal)
    
  

  Vue.mixin(
    // 路由钩子函数，在vue执行beforeCreate钩子函数回调时会一起调用，因为beforeCreate是一个数组
    beforeCreate () 
      Vue.$options = options
      if (isDef(this.$options.router)) 
        this._routerRoot = this
        this._router = this.$options.router
        // 调用init
        this._router.init(this)
        // 调用Vue内部util方法使得当前的url实现响应式化
        Vue.util.defineReactive(this, '_route', this._router.history.current)
       else 
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      
      // 注册实例
      registerInstance(this, this)
    ,
    destroyed () 
      registerInstance(this)
    
  )
  // 将$router和$route挂载到Vue的原型链上
  Object.defineProperty(Vue.prototype, '$router', 
    get ()  return this._routerRoot._router 
  )

  Object.defineProperty(Vue.prototype, '$route', 
    get ()  return this._routerRoot._route 
  )

  // 注册路由视图和路由链接两个组件
  Vue.component('RouterView', View)
  Vue.component('RouterLink', Link)

  // 执行Vue的选项合并策略
  const strats = Vue.config.optionMergeStrategies
  // use the same hook merging strategy for route hooks
  strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created

??可以看出，在install内部主要做了三个事：

• 1. 就是利用Vue的mixin方法混入了全局beforeCreate和destoryed，在首次加载执行beforeCreate时，指定_routerRoot为当前的Vue实例，并且执行Vue-Router的init初始化工作（install最核心还是init初始化，这个具体细节稍后进行介绍），在beforeCreate方法内，主要是对父组件（也就是router所挂载的节点）进行初始化操作，并设置当前的_routerRoot为该组件对应的实例，在该逐渐中去初始化init路由的一些配置（比如设置路由模式等），其他组件比如（router-link, router-view会将_routerRoot设置为在options参数中包含了router选项的父(祖先)组件），并执行registerInstance方法，该方法中的registerRouteInstance目前其实是router-view组件中所定义的一个方法，主要作用是执行当前组件的渲染工作，如下:

const registerInstance = (vm, callVal) => 
    // 父虚拟节点
    let i = vm.$options._parentVnode
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) 
      i(vm, callVal)
    
  

??这个混入相当于是定义，具体执行时等各组件在进行实例化时按照生命周期回调beforeCreate和destoryed这两个钩子函数，destroyed作用是在进行比如路由切换后、实际上作用就是清除上一个展示在router-view中的组件所渲染的内容。

• 1. 将$router和$route挂载到Vue的原型链上，可以通过this.$router和this.$route进行使用；
• 1. 注册router-link和router-view两个组件到Vue中。

总结

??由于希望篇幅不要太大，不然看起来比较吃力，所以本篇文章先就写到这里，关于实例化和具体使用所涉及到的原理工作后面文章再讨论。在这对本篇文章做一个小结：

• 简要介绍了前端路由，以及实现前端路由的两种模式 URL hash和history API并对这两者做了对比；
• 介绍了Vue是如何use Vue-Router组件，实际上内部就是回调Vue-Router内部定义的install方法；
• 介绍了install方法的一些主要工作职能：
  • 混入beforeCreate和destoryed方法；
  • 全局挂载$router和$route；
  • 注册router-link和router-view两个组件。
    另外，欢迎去本人git 可相互学习和star。