vue router 实现原理

Vue Router 的实现原理

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

哈希模式（Hash Mode）

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

实现原理：

• 监听 hashchange 事件，当 URL 的哈希部分变化时，触发路由匹配和组件渲染。
• 哈希变化不会向服务器发送请求，完全由前端控制。

示例代码：

window.addEventListener('hashchange', () => {
  const hash = window.location.hash.slice(1); // 获取哈希部分
  // 根据哈希匹配路由并渲染组件
});

历史模式（History Mode）

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

实现原理：

• 通过 pushState 和 replaceState 修改 URL，并手动触发路由匹配。
• 监听 popstate 事件，处理浏览器前进/后退操作。
• 需要服务器配置支持，避免直接访问子路由时返回 404。

示例代码：

// 修改 URL
history.pushState({}, '', '/new-route');

// 监听前进/后退
window.addEventListener('popstate', () => {
  const path = window.location.pathname; // 获取路径
  // 根据路径匹配路由
});

路由匹配与组件渲染

Vue Router 的核心是通过路由配置表（routes）将 URL 路径映射到对应的组件。

流程：

1. 解析当前 URL，获取路径（如 /home）。
2. 根据路径匹配路由配置中的 path，找到对应的组件。
3. 通过 <router-view> 动态渲染匹配的组件。

路由配置示例：

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

响应式路由

Vue Router 与 Vue 的响应式系统深度集成：

• 当前路由信息（如 $route）是响应式的，路径变化时会触发组件更新。
• 通过 Vue 的依赖追踪机制，自动重新渲染 <router-view>。

导航守卫

导航守卫（Navigation Guards）用于控制路由跳转的逻辑，如权限验证。

守卫类型：

• 全局守卫：beforeEach、beforeResolve、afterEach。
• 路由独享守卫：beforeEnter。
• 组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。

示例：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

动态路由

通过 addRoute 动态添加路由，或利用 import() 实现懒加载。

动态添加路由：

router.addRoute({ path: '/new', component: NewComponent });

懒加载：

const routes = [
  { path: '/lazy', component: () => import('./LazyComponent.vue') }
];

总结

Vue Router 的核心是通过监听 URL 变化（哈希或历史 API），匹配路由配置，动态渲染组件，并结合 Vue 的响应式系统实现无缝导航。其设计兼顾了灵活性和性能，支持高级功能如导航守卫和动态路由。