Vuerouter 的底层实现原理

文章目录

前言
- [🧩 Vue Router 底层实现核心原理](#🧩 Vue Router 底层实现核心原理)
- [🧠 执行流程图（简化版）](#🧠 执行流程图（简化版）)
- [🔍 核心模块源码原理（简要）](#🔍 核心模块源码原理（简要）)
- - [① 路由注册与匹配（createRouterMatcher）](#① 路由注册与匹配（createRouterMatcher）)
  - [② 历史模式管理器（createWebHistory / createWebHashHistory）](#② 历史模式管理器（createWebHistory / createWebHashHistory）)
  - [③ 导航守卫系统（beforeEach、beforeEnter、beforeRouteLeave）](#③ 导航守卫系统（beforeEach、beforeEnter、beforeRouteLeave）)
  - [④ 响应式路由状态（useRoute / useRouter）](#④ 响应式路由状态（useRoute / useRouter）)
  - [⑤ 组件渲染机制（RouterView）](#⑤ 组件渲染机制（RouterView）)
- [✅ 总结：Vue Router 是如何运行的？](#✅ 总结：Vue Router 是如何运行的？)

前言

Vue Router（Vue 3 官方路由库）的底层实现，主要围绕以下几个核心模块进行设计与运行：

🧩 Vue Router 底层实现核心原理

Vue Router 的核心可以拆解为以下 5 个模块：

模块	功能描述
① 路由注册系统（Matcher）	负责根据配置生成路由表并进行路径匹配
② 历史管理器（History）	控制浏览器地址栏变化，支持 `hash`、`history`、`memory` 模式
③ 路由导航守卫系统	控制路由进入、离开逻辑（如权限控制）
④ 响应式状态管理	当前路由、路由参数等响应式跟踪
⑤ 路由组件渲染系统	`<RouterView>` / `<RouterLink>` 实现组件显示

🧠 执行流程图（简化版）

txt 复制代码

用户点击/编程导航
        ↓
  触发 router.push()
        ↓
  ➤ 调用 matcher.resolve() 匹配路由
        ↓
  ➤ 运行导航守卫（全局/路由/组件）
        ↓
  ➤ 成功后 history.pushState() 或 location.hash 更新地址
        ↓
  ➤ 响应式更新 currentRoute，RouterView 渲染组件

🔍 核心模块源码原理（简要）

① 路由注册与匹配（createRouterMatcher）

位置：packages/router/src/matcher/index.ts

ts 复制代码

const matcher = createRouterMatcher(routes, options)

matcher.resolve(location) // 根据路径解析出 RouteRecord

解析用户传入的 routes 配置为 路由树。
支持动态参数、嵌套路由、通配符等。

② 历史模式管理器（createWebHistory / createWebHashHistory）

位置：packages/router/src/history/

ts 复制代码

const history = createWebHistory()

history.push('/home')   // 使用 window.history API
history.listen(callback) // 监听 popstate 事件

hash 模式 ：监听 hashchange，地址形如 /#/home
history 模式 ：监听 popstate，使用 pushState/replaceState
memory 模式：主要用于 SSR 或测试环境

③ 导航守卫系统（beforeEach、beforeEnter、beforeRouteLeave）

位置：packages/router/src/navigationGuards.ts

ts 复制代码

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !auth.isLoggedIn()) {
    return '/login'
  }
  next()
})

支持异步、Promise、next() 控制
包括全局守卫、路由守卫、组件守卫

④ 响应式路由状态（useRoute / useRouter）

内部使用 shallowRef(currentRoute) 维护状态：

ts 复制代码

const currentRoute = shallowRef(...)

每次路由跳转，都会更新 currentRoute
<RouterView> 和组件通过依赖追踪自动刷新页面视图

⑤ 组件渲染机制（RouterView）

位置：packages/router/src/components/RouterView.ts

vue 复制代码

<RouterView /> 根据当前 route 渲染匹配的组件

支持嵌套视图、命名视图、keep-alive 等
本质是根据路由记录动态切换组件

✅ 总结：Vue Router 是如何运行的？

环节	原理
注册	创建 matcher 匹配器，解析 `routes` 配置
导航	调用 `router.push`，修改地址栏，更新 `currentRoute`

扩展：
VueRouter 看源码