详解Vue-Router源码分析路由实现原理


Posted in Javascript onMay 15, 2019

深入Vue-Router源码分析路由实现原理

使用Vue开发SPA应用,离不开vue-router,那么vue和vue-router是如何协作运行的呢,下面从使用的角度,大白话帮大家一步步梳理下vue-router的整个实现流程。

到发文时使用的版本是:
- vue (v2.5.0)
- vue-router (v3.0.1)

一、vue-router 源码结构

github 地址:https://github.com/vuejs/vue-router

详解Vue-Router源码分析路由实现原理

components下是两个组件<router-view> 和 <router-link>

history是路由方式的封装,提供三种方式

util下主要是各种功能类和功能函数

create-matcher和create-router-map是生成匹配表

index是VueRouter类,也整个插件的入口

Install 提供安装的方法

先整体展示下vue-router使用方式,请牢记一下几步哦。

import Vue from 'vue'
import VueRouter from 'vue-router'
//注册插件 如果是在浏览器环境运行的,可以不写该方法
Vue.use(VueRouter)

// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const User = { template: '<div>用户</div>' }
const Role = { template: '<div>角色</div>' }

// 2. 定义路由
// Array,每个路由应该映射一个组件。
const routes = [
 { path: '/user', component: User },
 { path: '/home', component: Home }
]

// 3. 创建 router 实例,并传 `routes` 配置
const router = new VueRouter({
 routes 
})

// 4. 创建和挂载根实例。
// 记得要通过 router 对象以参数注入Vue,
// 从而让整个应用都有路由功能
// 使用 router-link 组件来导航.
// 路由出口
// 路由匹配到的组件将渲染在这里
const app = new Vue({
 router,
 template: `
  <div id="app">
   <h1>Basic</h1>
   <ul>
    <li><router-link to="/">/</router-link></li>
    <li><router-link to="/user">用户</router-link></li>
    <li><router-link to="/role">角色</router-link></li>
    <router-link tag="li" to="/user">/用户</router-link>
   </ul>
   <router-view class="view"></router-view>
  </div>
 `
}).$mount('#app')

分析开始

第一步

Vue是使用.use( plugins )方法将插件注入到Vue中。
use方法会检测注入插件VueRouter内的install方法,如果有,则执行install方法。
注意:如果是在浏览器环境,在index.js内会自动调用.use方法。如果是基于node环境,需要手动调用。

if (inBrowser && window.Vue) {
 window.Vue.use(VueRouter)
}

Install解析 (对应目录结构的install.js)

该方法内主要做了以下三件事:

  1. 1、对Vue实例混入beforeCreate钩子操作(在Vue的生命周期阶段会被调用)
  2. 2、通过Vue.prototype定义router、router、route 属性(方便所有组件可以获取这两个属性)
  3. 3、Vue上注册router-link和router-view两个组件

 

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 () {
   if (isDef(this.$options.router)) {
    this._routerRoot = this
    this._router = this.$options.router
    this._router.init(this)
    Vue.util.defineReactive(this, '_route', this._router.history.current)
   } else {
    this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
   }
   registerInstance(this, this)
  },
  destroyed () {
   registerInstance(this)
  }
 })
 //通过Vue.prototype定义$router、$route 属性(方便所有组件可以获取这两个属性)
 Object.defineProperty(Vue.prototype, '$router', {
  get () { return this._routerRoot._router }
 })

 Object.defineProperty(Vue.prototype, '$route', {
  get () { return this._routerRoot._route }
 })
 //Vue上注册router-link和router-view两个组件
 Vue.component('RouterView', View)
 Vue.component('RouterLink', Link)

 const strats = Vue.config.optionMergeStrategies
 // use the same hook merging strategy for route hooks
 strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
}

第二步 生成router实例

const router = new VueRouter({
 routes 
})

生成实例过程中,主要做了以下两件事

  1. 1、根据配置数组(传入的routes)生成路由配置记录表。
  2. 2、根据不同模式生成监控路由变化的History对象

注:History类由HTML5History、HashHistory、AbstractHistory三类继承
history/base.js实现了基本history的操作
history/hash.js,history/html5.js和history/abstract.js继承了base,只是根据不同的模式封装了一些基本操作

第三步 生成vue实例

const app = new Vue({
 router,
 template: `
  <div id="app">
   <h1>Basic</h1>
   <ul>
    <li><router-link to="/">/</router-link></li>
    <li><router-link to="/user">用户</router-link></li>
    <li><router-link to="/role">角色</router-link></li>
    <router-link tag="li" to="/user">/用户</router-link>
   </ul>
   <router-view class="view"></router-view>
  </div>
 `
}).$mount('#app')

代码执行到这,会进入Vue的生命周期,还记得第一步Vue-Router对Vue混入了beforeCreate钩子吗,在此会执行哦

Vue.mixin({
  beforeCreate () {
   //验证vue是否有router对象了,如果有,就不再初始化了
   if (isDef(this.$options.router)) { //没有router对象
    //将_routerRoot指向根组件
    this._routerRoot = this
    //将router对象挂载到根组件元素_router上
    this._router = this.$options.router
    //初始化,建立路由监控
    this._router.init(this)
    //劫持数据_route,一旦_route数据发生变化后,通知router-view执行render方法
    Vue.util.defineReactive(this, '_route', this._router.history.current)
   } else {
    //如果有router对象,去寻找根组件,将_routerRoot执行根组件(解决嵌套关系时候_routerRoot指向不一致问题)
    this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
   }
   registerInstance(this, this)
  },
  destroyed () {
   registerInstance(this)
  }
 })

代码执行到这,初始化结束,界面将显示默认首页

路由更新方式:

一、主动触发

router-link绑定了click方法,触发history.push或者history.replace,从而触发history.transitionTo。
transitionTo用于处理路由转换,其中包含了updateRoute用于更新_route。
在beforeCreate中有劫持_route的方法,当_route变化后,触发router-view的变化。

二、地址变化(如:在浏览器地址栏直接输入地址)

HashHistory和HTML5History会分别监控hashchange和popstate来对路由变化作对用的处理 。
HashHistory和HTML5History捕获到变化后会对应执行push或replace方法,从而调用transitionTo
,剩下的就和上面主动触发一样啦。

总结

 1、安装插件

混入beforeCreate生命周期处理,初始化_routerRoot,_router,_route等数据
全局设置vue静态访问router和router和route,方便后期访问
完成了router-link和 router-view 两个组件的注册,router-link用于触发路由的变化,router-view作 为功能组件,用于触发对应路由视图的变化

2、根据路由配置生成router实例

根据配置数组生成路由配置记录表
生成监控路由变化的hsitory对象

3、将router实例传入根vue实例

根据beforeCreate混入,为根vue对象设置了劫持字段_route,用户触发router-view的变化
调用init()函数,完成首次路由的渲染,首次渲染的调用路径是 调用history.transitionTo方法,根据router的match函数,生成一个新的route对象
接着通过confirmTransition对比一下新生成的route和当前的route对象是否改变,改变的话触发updateRoute,更新hsitory.current属性,触发根组件的_route的变化,从而导致组件的调用render函数,更新router-view
另外一种更新路由的方式是主动触发

router-link绑定了click方法,触发history.push或者history.replace,从而触发history.transitionTo
同时会监控hashchange和popstate来对路由变化作对用的处理

以上所述是小编给大家介绍的Vue-Router源码分析路由实现原理详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Stop SQL Server
Jun 21 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
javascript常用函数(1)
Nov 04 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
微信小程序select下拉框实现效果
May 15 #Javascript
详解js常用分割取字符串的方法
May 15 #Javascript
elementUI table表格动态合并的示例代码
May 15 #Javascript
详解VUE调用本地json的使用方法
May 15 #Javascript
微信小程序的mpvue框架快速上手指南
May 15 #Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 #Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 #Javascript
You might like
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
js DOM的学习笔记
2011/12/22 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
js实现图片实时时钟
2020/01/15 Javascript
Python selenium根据class定位页面元素的方法
2019/02/26 Python
django中forms组件的使用与注意
2019/07/08 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
前厅收银主管岗位职责
2014/02/04 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
如何正确理解python装饰器
2021/06/15 Python