Vue源码分析（5）—— Router

最新推荐文章于 2022-08-10 10:50:59 发布
最新推荐文章于 2022-08-10 10:50:59 发布
阅读量100 收藏
点赞数
分类专栏： vue源码总结 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44844528/article/details/106725052
版权
本文详细分析Vue Router的安装、实例化、路由跳转和渲染过程。从全局注入到组件初始化，从配置解析到路由跳转的响应式处理，再到路由组件的渲染与传参，揭示了Vue Router如何实现页面间的导航和数据传递。
摘要由CSDN通过智能技术生成
1. 安装过程
  1. 通过mixin全局注入beforeCreate钩子，组件初始化时注入_routerRoot
  2. 使用Object.defineproperty挂载$router和$route参数
  3. 全局注入RouterView和RoterLink组件
  4. 定义合并策略
2. 实例化Router
  1. 解析配置生成matcher
  2. 判断环境实例化history对象

在这里插入图片描述

3. 路由跳转
  1. 根组件实例化时触发beforeCreate钩子，调用Router的init方法，绑定全局路由监听事件，进行首次路由跳转并响应式处理this._route
  2. 触发路由跳转后，执行Router.history上的跳转方法
  3. 解析路由，提取钩子，执行钩子，确认并更新路由触发响应式，修改url，触发after钩子
  4. 下一事件循环响应式触发视图更新，渲染新路由组件

最低0.47元/天 解锁文章
辅助不是混
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuerouter的beforeEach与afterEach钩子函数的区别
明月如霜丶
02-20 3385
在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。 定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。 总体来讲vue里面提供了三大类钩子，两种函数 1、全局钩子 2、某个路由的钩子 3、组件内钩子 两种函数： 1、Vue.beforeEach(function(to,form,next){}) /在跳转之前执行/ 2.Vue.afte...
interview-meituanWeb-vue:仿美团PC端——vue
03-09
【标题】"interview-meituanWeb-vue:仿美团PC端——vue"是一个基于Vue.js框架实现的项目，旨在模拟构建美团网的PC端网页。这个项目可以帮助开发者熟悉Vue.js的基本用法以及如何将其应用于实际的前端开发场景中。 ...
Vue中各个生命周期阶段的源码探究--beforeCreate和created阶段
YKG
11-24 9812
本文主要探讨一下，Vue的一个大致运行流程，我们知道，它的生命周期包括,beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。但这里讨论只包含beforeCreate,created,beforeMount,mounted，因为探讨的过程只涉及Vue实例创建，事件生命周期、数据监听...
VueRouter 源码深度解析
weixin_34006965的博客
08-01 368
VueRouter 源码深度解析 该文章内容节选自团队的开源项目InterviewMap。项目目前内容包含了 JS、网络、浏览器相关、性能优化、安全、框架、Git、数据结构、算法等内容，无论是基础还是进阶，亦或是源码解读，你都能在本图谱中得到满意的答案，希望这个面试图谱能够帮助到大家更好的准备面试。 路由原理 在解析源码前，先来了解下前端路由的实现原理。 前端路由实现起来其实很...
vue-router的路由守卫，router.foreEach()，router.beforeResolve()，router.afterEach()使用方法
qq_43305958的博客
08-29 1万+
@TOC 一、vue-router是什么？ Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 二、router.foreEach() 1.写在main.js文
vue中 router.beforeEach() 的用法
seimeii的博客
08-10 3万+
vue中 router.beforeEach() 的用法
Vue3 Project 项目(02)源码
04-02
Vue3 Project 项目(02)源码是一个关于Vue.js框架的最新版本——Vue3的实战项目代码。在这个项目中，我们将深入理解Vue3的核心特性，包括Composition API、Setup函数、响应式系统优化以及TypeScript的集成应用。下面...
VUE-电商后台系统-源代码压缩包-lysimportant-vue_shop_server-master
10-03
5. **数据分析**：通过图表展示销售数据、用户行为分析等，可以利用ECharts或Vue-Charts等库进行数据可视化。 6. **API通信**：Vue.js 通常与后端API接口进行交互，通过axios或fetch等库进行异步请求。 在"vue_shop...
Vue多用途电子商务商店网站模板源代码
07-05
3. **Vue Router 路由管理**：Vue Router是官方推荐的路由管理库，用于处理页面间的导航和URL映射。模板中会包含预定义的路由，用于展示商品列表、商品详情、购物车、结账等页面。 4. **组件库**：模板可能使用了如...
java班级综合测评管理系统源码（springboot+vue+mysql+说明文档+LW）.zip
09-11
六、源码分析 项目源码中包含了后端的Java代码和前端的Vue代码，是学习和研究SpringBoot+Vue集成应用的宝贵资源。通过对源码的学习，开发者可以深入理解这两个框架在实际项目中的应用，提升自己的技能。 总的来说，...
Vue 原理解析（二）：初始化时beforeCreate之前做了什么
绿足 博客
09-22 8581
上一篇： Vue原理解析（一） Vue到底是什么 上一章我们知道在 new Vue() 时， 内部会执行一个this._init() 方法， 这个方法是在initMixin(Vue) 内定义的： export function initMixin(Vue) { Vue.prototype._init = function(options) { ... } } 当执行new ...
【vue.js】生命周期——beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDesotry、destoryed
热门推荐
weixin_39068791的博客
08-03 7万+
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.js">&lt
Vue的生命周期函数和beforeRouteEnter()/beforeRouteLeave()的函数
dt1991524的博客
12-27 6029
用Vue开发了一个项目，虽然项目做完了，但心中却没有一个完整的知识体系，不能称之为会Vue，也许只能称之为了解，这段时间闲剩下来，找到Vue.js 的官网，简直了。。。简直都是自己陌生的各种语法函数，都怀疑自己是怎么做的项目啦！ 先参考vue官网从简单的看起！先了解下vue的生命周期。     也许我们从上图中并不能直观的看出生命周期中的函数的具体使命，先简短的用文字了解下： before...
vue-router的使用及实现原理
caoxinhui521的博客
08-29 7万+
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式: 1. 在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航 2. 使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL。当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路
vue-router中参数传递 && 编程式导航 && 坑 && beforeRouteEnter
weixin_33913377的博客
05-28 331
第一部分: vue-router参数传递 通过router-link我们可以向路由到的组件传递参数，这在我们实际使用中时非常重要的。 　 路由： { path:"/DetailPage", component: DetailPage, name: "详情页" },     router-link: &lt...
vue生命周期beforeCreate()前做了什么
蜡笔love小新的博客
10-13 2万+
概念 当我们执行 new Vue()开始到被创建完成，vue需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 beforeCreate 问题：beforeCreate为vue初始化过程中第一个钩子函数，那么从new Vue()到beforeCreate过程它做了什么？ ...
Vue生命周期和beforeRouteEnter理解
weixin_40741265的博客
11-15 3万+
1、beforeRouteEnter(to,from,next) beforeRouteEnter 函数内部 this 是undefined，这是因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；先执行beforRouteEnter，再执行组件周期钩子函数beforeCreate。我们可以通过 next 获取组件的实例对象，如：next( (vm)=>{} )...
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长
08-12
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
SEQ投诉处理与VONR信令及特性介绍
最新发布
08-12
SEQ平台5G分析模块介绍 投诉分析处理 VoNR信令及特性介绍
vue-router应用——用户登录注册案例
05-24
import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 接下来，我们新建一个router.js文件，用于配置路由。在该文件中，我们需要定义路由路径和路由组件： ``` import Vue from 'vue' import VueRouter ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值