vue router实现原理

Vue Router 的实现原理

Vue Router 是 Vue.js 的官方路由管理器，其核心原理基于前端路由的两种模式：Hash 模式和 History 模式。以下是其实现的关键点：

Hash 模式

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

• 通过监听 hashchange 事件响应 URL 变化。
• 路由变化时，动态渲染对应的组件。
• 示例代码：

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

History 模式

History 模式基于 HTML5 History API（pushState、replaceState），需服务器配置支持。

• 通过 pushState 修改 URL 而不刷新页面。
• 监听 popstate 事件处理浏览器前进/后退。
• 示例代码：

  history.pushState({}, '', '/new-route');
  window.addEventListener('popstate', () => {
    const currentPath = window.location.pathname;
    // 匹配组件并渲染
  });

核心机制

1. 路由映射：通过配置的路由表（routes）将路径映射到组件。
2. 响应式路由：Vue Router 通过 Vue.util.defineReactive 将当前路由路径设为响应式，触发视图更新。
3. 组件渲染：使用 <router-view> 作为占位符，根据当前路由动态渲染目标组件。

路由守卫

通过导航守卫（如 beforeEach）控制路由跳转流程，实现权限校验等功能。

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

动态路由

支持通过 addRoutes 动态添加路由，常用于权限管理。

router.addRoutes([
  { path: '/admin', component: AdminPanel }
]);

总结

Vue Router 通过监听 URL 变化、匹配路由表、动态渲染组件实现单页应用的路由功能，同时提供导航守卫和动态路由扩展能力。两种模式分别依赖浏览器 API，需根据实际需求选择。