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)阶段完成。prometheus优化源码其次，更新了内部的_route属性。那么，视图为何会据此更新呢？答案在于响应式属性的机制。

       VueRouter的install方法(src/install.js)对全局Vue对象进行了扩展，其中将_route属性定义为响应式属性。这意味着每当_route属性变化，视图就会自动更新。

       响应式属性的实现原理基于Object.defineProperty，这是脉聊官方源码一种JavaScript对象属性的动态绑定机制。通过它，可以为对象属性添加读取和写入操作的监听逻辑，从而实现在属性值改变时触发相应的响应行为。

       从设计模式的角度来看，这里采用了发布订阅模式。发布者（即属性值）在变化时发出事件，订阅者（视图）接收到事件后执行相应的更新操作。

       进一步探索，可以尝试实现类似Object.defineProperty的功能，以深入理解其工作原理和在Vue中响应式系统中的应用。

vue-router源码六、router.resolve源码解析

       vue-router源码系列带你深入了解v4.0.版本的实现，前提是对基本用法有一定了解，可通过官网学习。本文焦点是调试vue非源码router.resolve的解析过程。

       router.resolve的核心任务是将给定的路由地址标准化。它接受两个参数：rawLocation（可能为对象或字符串）和currentLocation（可选，默认为currentRoute）。解析过程分为两个分支：

       parseURL函数接收query解析函数、location和currentLocation，负责处理相对路径。例如，当to='cc'，from='/aa/bb'时，经过一系列resolveRelativePath操作，最终可能转换为'/aa/cc'，'/aa/bb/cc'等。特别地，如果from路径以'/ '开始，无论to如何，雨点下落动画源码resolveRelativePath始终返回'/cc'。

       解析完rawLocation后，调用matcher.resolve进一步处理，这个阶段会根据匹配规则进行更复杂的路径处理。

       最终，router.resolve返回一个标准化后的路由对象，包含了处理后的路径信息和其他相关数据，为后续的导航操作提供依据。

vue-router源码学习 - install与<router-view>

       本文深入解析Vue-router的install过程和部分逻辑。首先，探讨Vue-router的注册机制，即Vue.use(VueRouter)时的执行关键代码。利用Vue.mixin功能，混入beforeCreate钩子，确保所有组件在初始化阶段定义好_router和_routerRoot。andlua启动次数源码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可能是无效的。

       小结