vue 路由实现原理

Vue 路由实现原理

Vue Router 是 Vue.js 官方提供的路由管理器，其核心原理基于前端路由技术，通过监听 URL 变化并动态渲染组件，实现单页应用（SPA）的无刷新页面切换。

核心机制

1. Hash 模式
   利用 URL 中的 hash（#）部分实现路由变化。

   • 监听 hashchange 事件，当 URL 的 hash 变化时触发路由更新。
   • 示例 URL：http://example.com/#/home。
   • 优点：兼容性高，无需服务器配置。

   window.addEventListener('hashchange', () => {
     const currentPath = window.location.hash.slice(1); // 获取当前路径
   });

2. History 模式
   基于 HTML5 History API（pushState、replaceState）实现无 # 的 URL。

   • 监听 popstate 事件，响应浏览器前进/后退操作。
   • 示例 URL：http://example.com/home。
   • 需服务器支持，避免直接访问子路由时返回 404。

   window.addEventListener('popstate', () => {
     const currentPath = window.location.pathname;
   });

路由映射与组件渲染

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

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

2. 动态匹配
   使用 path-to-regexp 库将路径字符串转换为正则表达式，匹配当前 URL 并解析参数。

   // 示例：动态路由匹配
   { path: '/user/:id', component: User }

3. 组件渲染
   路由匹配成功后，通过 <router-view> 动态渲染目标组件，利用 Vue 的响应式机制更新视图。

导航守卫

通过钩子函数控制路由跳转流程，例如权限验证或数据预加载。

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

关键实现代码片段

1. 初始化路由
   创建 VueRouter 实例时，根据模式初始化监听逻辑。

   class VueRouter {
     constructor(options) {
       this.mode = options.mode || 'hash';
       if (this.mode === 'hash') {
         this._setupHashListener();
       } else {
         this._setupHistoryListener();
       }
     }
   }

2. 路由跳转
   封装 push 方法，处理导航逻辑。

   push(path) {
     if (this.mode === 'hash') {
       window.location.hash = path;
     } else {
       window.history.pushState({}, '', path);
     }
   }

总结

Vue Router 通过监听 URL 变化、匹配路由表、动态渲染组件实现前端路由。Hash 模式兼容性更好，History 模式更美观但需服务器支持。导航守卫和动态路由等特性进一步扩展了路由的灵活性和功能性。