vue的路由实现原理

Vue 路由实现原理

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

哈希模式

哈希模式利用 URL 中的哈希部分（#）来实现路由切换，不会触发页面刷新。
监听 hashchange 事件，当哈希值变化时，动态渲染对应的组件。
哈希模式兼容性较好，适用于所有浏览器。

window.addEventListener('hashchange', () => {
  const currentHash = window.location.hash.slice(1);
  // 根据哈希值渲染对应组件
});

历史模式

历史模式基于 HTML5 的 history.pushState 和 history.replaceState API，通过修改 URL 的路径实现路由切换。
监听 popstate 事件，当用户点击浏览器的前进或后退按钮时，动态渲染对应组件。
需要服务器配置支持，避免直接访问子路由时返回 404。

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

核心实现步骤

Vue Router 的核心是通过维护一个路由映射表（routes 配置），将 URL 与组件关联起来。
通过响应式机制，当前路由变化时自动触发视图更新。

1. 路由映射表
   将用户配置的路由规则解析为路径与组件的映射关系，例如：

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

2. 路由匹配
   根据当前 URL 路径（或哈希）匹配路由配置，找到对应的组件。

   

3. 动态渲染
   通过 Vue 的动态组件（<router-view>）或渲染函数，将匹配到的组件渲染到页面中。

4. 导航守卫
   提供全局或路由独享的钩子函数（如 beforeEach），用于控制路由跳转逻辑。

响应式原理

Vue Router 通过 Vue 的响应式系统，将当前路由信息（如 $route）注入到每个组件中。
当路由变化时，触发依赖更新，重新渲染对应的视图组件。

// 简化的响应式实现
class VueRouter {
  constructor(options) {
    this.current = window.location.hash.slice(1) || '/';
    window.addEventListener('hashchange', () => {
      this.current = window.location.hash.slice(1);
    });
  }
}

总结

Vue Router 的核心是通过监听 URL 变化，匹配路由配置，并利用 Vue 的响应式机制动态渲染组件。
哈希模式和历史模式分别通过 hashchange 和 popstate 事件实现无刷新路由切换。
导航守卫和路由映射表提供了灵活的跳转控制和配置能力。