1.Vue Router 源码学习笔记5 - 视更新的实现
2.vue-router源码六、router.resolve源码解析
3.vue-router源码学习 - install与<router-view>
4.一文读懂 react-router 原理
Vue Router 源码学习笔记5 - 视更新的实现
History模块的updateRoute方法主要执行三项关键任务。首先，此方法触发了cb函数，该函数相当于注册监听器，这一过程在VueRouter初始化(src/index.js)阶段完成。印度盘源码其次，更新了内部的_route属性。那么，视图为何会据此更新呢？答案在于响应式属性的机制。
VueRouter的install方法(src/install.js)对全局Vue对象进行了扩展，其中将_route属性定义为响应式属性。这意味着每当_route属性变化，视图就会自动更新。
响应式属性的实现原理基于Object.defineProperty，这是芋道源码博客一种JavaScript对象属性的动态绑定机制。通过它，可以为对象属性添加读取和写入操作的监听逻辑，从而实现在属性值改变时触发相应的响应行为。
从设计模式的角度来看，这里采用了发布订阅模式。发布者（即属性值）在变化时发出事件，订阅者（视图）接收到事件后执行相应的更新操作。
进一步探索，可以尝试实现类似Object.defineProperty的功能，以深入理解其工作原理和在Vue中响应式系统中的应用。
vue-router源码六、router.resolve源码解析
vue-router源码系列带你深入了解v4.0.版本的实现，前提是对基本用法有一定了解，可通过官网学习。本文焦点是汽车之家注册源码router.resolve的解析过程。
router.resolve的核心任务是将给定的路由地址标准化。它接受两个参数：rawLocation（可能为对象或字符串）和currentLocation（可选，默认为currentRoute）。解析过程分为两个分支：
parseURL函数接收query解析函数、location和currentLocation，负责处理相对路径。例如，当to='cc'，from='/aa/bb'时，经过一系列resolveRelativePath操作，最终可能转换为'/aa/cc'，'/aa/bb/cc'等。特别地，如果from路径以'/ '开始，无论to如何，centos源码安装qemuresolveRelativePath始终返回'/cc'。
解析完rawLocation后，调用matcher.resolve进一步处理，这个阶段会根据匹配规则进行更复杂的路径处理。
最终，router.resolve返回一个标准化后的路由对象，包含了处理后的路径信息和其他相关数据，为后续的导航操作提供依据。
vue-router源码学习 - install与<router-view>
本文深入解析Vue-router的install过程和部分逻辑。首先，探讨Vue-router的注册机制，即Vue.use(VueRouter)时的执行关键代码。利用Vue.mixin功能，混入beforeCreate钩子，确保所有组件在初始化阶段定义好_router和_routerRoot。斗斗金指标源码this.$options展示组件构造时传递的选项信息。根组件执行beforeCreate时，_routerRoot指向根组件，而非根组件的执行则不同。全局混入后，定义$router和$route变量，并注册两个组件。
接下来，聚焦渲染流程的核心。主要负责渲染匹配到的路由组件。上篇中介绍的嵌套路由机制在匹配RouteRecord后，使用Route，其matched字段包含匹配的RouteRecord及其所有祖先RouteRecord。多个层级的页面中，每个router-view需知道自己的层级，通过源码内容实现。每个router-view标记自身，便于确定层级，在找到对应层级组件后进行渲染。
至此，渲染过程简化流程清晰呈现，但Vue-router的复杂性意味着仍有更多细节待探索。后续文章将继续深入，逐步解析更多功能。
一文读懂 react-router 原理
react-router是react生态系统中关键的一部分，它帮助我们管理URL以及实现页面组件间的切换。本文将深入react-router源码，探究其工作原理。
在开发中，我们通常不会直接使用react-router的核心API，而是从react-router-dom中导出所有API和组件。此外，还有我们不直接接触的history库，它们共同构成了完整的router功能，它们之间的关系如下：
这就是三个关键模块间的关系。
react-router：基于Context的全局状态下发
router是一个“Provider-Consumer”模型，你在最外层提供一个Provider，在内部任意位置都可以用Consumer接到数据。显然，这里使用了React.Context。
这里下发了两个Context：RouterContext、HistoryContext，都是隔壁模块导入的单例，所以一个项目中只能用一套react-router。那这两个有什么不同？各自下发了哪些状态？
RouterContext
RouterContext下发一个对象，主要包含三个信息：
其中，history来自history库提供的统一API，包括history的读取、操作、订阅等。
location来自Router的一个状态，Router会在mount的时候监听history，并在改变时更新location：
match用来描述当前Route对URL的匹配信息。Router来自Class的静态方法，写死了根路由的信息。
HistoryContext
HistoryContext更简单，直接下发了history：value={ this.props.history}。但是HistoryContext为什么要单独给呢？
总结下来，Router的结构如下：
：路由递归
Route用来匹配路由，特性如下：
根据当前路由匹配规则渲染对应组件
首先Route要判断自己是否匹配：
Route嵌套的实现
为了实现Route套Route，Route每次渲染都会重建一个RouterContext.Provider，把值更新为当前Route下计算后的router信息。
总结如下：
matchPath方法细节
最后打开matchPath方法看细节：
组件取值
组件可能需要哪些值？
可能通过哪些方式拿到？
消费Context的方式显然更通用，因此react-router的消费实现大多用这种方式。
withRouter()
在没hook前，withRouter是我们取route信息的主要方式。它是个简单的HOC：
hooks
有hook后，react-router提供了几个hook，也都是基于useContext来做的。
其他路由组件
react-router还提供了一些其他组件来丰富调用方式，举个的例子看看。
react-router-dom组件： 和
只是在用不同的history调：
history接口
主要几个信息：
实现思路
如图：
模块划分：
主要调用逻辑：
createBrowserHistory和createHashHistory的差异
两个方法向外暴露的接口完全一样，为了抹平差异，实现上做了如下两点适配：
1、location属性计算
createBrowserHistory下，location中的pathname, search, hash直接来自于window.location。
createHashHistory下则都是从#后的hash中解析出来的，比如hash部分是#/a/b?c=1#/d，解析出{ hash: '#/d', search: '?c=1', pathname: '/a/b'}。
2、event listener事件监听
createBrowserHistory只需监听popstate，而createHashHistory还要监听hashchange，而且这里要判断下前后location是否相等，因为hashchange可能是无效的。
小结