Vuerouter 的底层实现原理

---

前言

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

---

🧩 Vue Router 底层实现核心原理

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

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

---

🧠 执行流程图（简化版）

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

---

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

① 路由注册与匹配（createRouterMatcher）

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

const matcher = createRouterMatcher(routes, options)

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

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

---

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

位置：packages/router/src/history/

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

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

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

---

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

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

const currentRoute = shallowRef(...)

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

---

⑤ 组件渲染机制（RouterView）

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

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

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

---

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

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

扩展：
VueRouter 看源码