37｜前端路由原理：vue-router源码剖析
大圣
该思维导图由 AI 生成，仅供参考
你好，我是大圣。
上一讲我们学习了下一代 Vuex 框架 Pinia 的原理，今天我来带你分析 Vue 生态中另外一个重要的框架 vue-router 的源码。
课程中我们也实现过一个迷你的 router，我们通过监听路由的变化，把路由数据包裹成响应式对象后，一旦路由发生变化，我们就去定义好的路由数据中查询当前路由对应的组件，在 router-view 中渲染即可。今天我们就进入到 vue-router 源码的内部，看一下实际的 vue-router 和我们实现的迷你版本有什么区别。
vue-router 入口分析
vue-router 提供了 createRouter 方法来创建路由配置，我们传入每个路由地址对应的组件后，使用 app.use 在 Vue 中加载 vue-router 插件，并且给 Vue 注册了两个内置组件，router-view 负责渲染当前路由匹配的组件，router-link 负责页面的跳转。
在下面的代码中，参数 RouterOptions 是规范我们配置的路由对象，主要包含 history、routes 等数据。routes 就是我们需要配置的路由对象，类型是 RouteRecordRaw 组成的数组，并且 RouteRecordRaw 的类型是三个类型的合并。然后返回值的类型 Router 就是包含了 addRoute、push、beforeEnter、install 方法的一个对象，并且维护了 currentRoute 和 options 两个属性。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Vue-router源码深入剖析 本文深入剖析了Vue生态中重要的框架vue-router的源码实现原理。文章首先介绍了createRouter方法的实现，该方法用于创建路由配置，并在Vue中加载vue-router插件，注册了两个内置组件router-view和router-link。接着详细分析了路由对象的安装过程，包括注册全局组件、定义全局变量\$router和\$route，并将路由变成响应式对象。然后，文章介绍了router-link和router-view两个组件的实现方式，以及其内部的逻辑和计算过程。 在源码分析中，文章展示了路由对象的创建、安装过程以及内置组件的实现方式。通过对vue-router源码的剖析，读者可以深入了解其内部实现原理，包括路由更新、路由跳转函数的实现，以及路由监听和状态管理等核心功能。这对于想深入了解Vue前端路由原理的开发者来说，是一份很有价值的技术资料。 总的来说，本文通过对vue-router源码的剖析，深入讲解了其内部实现原理，读者可以通过本文了解到vue-router的核心功能和实现细节，对于想深入了解Vue前端路由原理的开发者来说，本文是一份很有价值的技术资料。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(3)
- 最新
- 精选
- InfoQ_e521a4ce8a54navigate 函数主要是执行一个异步队列；核心代码 function runGuardQueue(guards: Lazy<any>[]): Promise<void> { return guards.reduce( (promise, guard) => promise.then(() => guard()), Promise.resolve() ) }2022-01-142
beckynavigate应该是按官方文章https://router.vuejs.org/guide/advanced/navigation-guards.html#the-full-navigation-resolution-flow 所写的顺序执行路由守卫2023-07-18归属地：浙江
Merlin_nil大圣老师好，install逻辑中似乎有个小错误，文中「通过 app.provide 给全局注册了 route 和 reactive 包裹后的 reactiveRoute 对象」，应该把route改为router吧？2022-04-11
收起评论