vue路由实现原理

Vue 路由实现原理

Vue Router 是 Vue.js 的官方路由管理器，其核心原理基于前端路由的实现方式，主要包括哈希模式（Hash Mode）和历史模式（History Mode）。

哈希模式

哈希模式利用 URL 中的哈希部分（#）实现路由切换，不会触发页面刷新。

• 通过监听 hashchange 事件实现路由变化。
• URL 格式示例：http://example.com/#/home。
• 哈希变化不会导致浏览器向服务器发送请求，完全由前端控制。

window.addEventListener('hashchange', () => {
  const currentPath = window.location.hash.slice(1) || '/';
  // 根据路径匹配组件并渲染
});

历史模式

历史模式基于 HTML5 的 history.pushState 和 history.replaceState API，允许修改 URL 而不刷新页面。

• 通过监听 popstate 事件实现路由变化（用户点击后退/前进按钮时触发）。
• URL 格式示例：http://example.com/home。
• 需要服务器配置支持，避免直接访问子路径时返回 404。

window.addEventListener('popstate', () => {
  const currentPath = window.location.pathname;
  // 根据路径匹配组件并渲染
});

核心实现步骤

1. 路由映射配置
   通过 routes 配置定义路径与组件的映射关系，生成路由表。

2. 路由初始化
   根据当前 URL 路径匹配路由表，渲染对应组件。

3. 路由切换

   • 哈希模式：修改 window.location.hash 触发 hashchange。
   • 历史模式：调用 history.pushState 或 history.replaceState 更新 URL。

4. 组件渲染
   通过 <router-view> 动态渲染匹配的组件，并触发路由守卫（如 beforeEach）。

动态路由匹配

通过 :param 语法定义动态路径参数，路由实例会解析参数并传递给组件。

const routes = [
  { path: '/user/:id', component: User }
];

路由守卫

提供全局或组件级钩子（如 beforeEnter、beforeRouteLeave），用于权限控制或数据预加载。

响应式原理

Vue Router 与 Vue 的响应式系统深度集成，路由变化时会触发组件更新，确保视图与 URL 同步。