vue router 实现原理

Vue Router 实现原理

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。其核心原理基于前端路由技术，通过监听 URL 变化动态渲染组件。

路由模式

Vue Router 支持两种路由模式：

• Hash 模式：通过 URL 的 hash（#）部分实现路由切换。例如 http://example.com/#/home。Hash 变化不会触发页面刷新，但会触发 hashchange 事件。
• History 模式：利用 HTML5 History API（pushState、replaceState）实现无 # 的 URL。例如 http://example.com/home。需要服务器配置支持，避免直接访问子路由时返回 404。

核心机制

1. 路由映射表
   通过配置 routes 数组定义路径与组件的映射关系，生成路由记录（RouteRecord）。例如：

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

2. 路由匹配
   使用路径解析库（如 path-to-regexp）将路径转换为正则表达式，匹配当前 URL 并找到对应的组件。

   

3. 响应式更新
   Vue Router 内部维护一个响应式的 currentRoute 对象，当 URL 变化时，通过 Vue 的响应式系统触发组件更新。

4. 导航守卫
   提供全局或局部的钩子函数（如 beforeEach、beforeRouteEnter），用于控制导航流程（如权限校验、数据预加载）。

   

关键代码逻辑

• 初始化路由
  创建 Router 实例时，会根据模式初始化路由系统：

  class VueRouter {
    constructor(options) {
      this.mode = options.mode || 'hash';
      this.routes = options.routes || [];
      this.history = this.mode === 'history' 
        ? new HTML5History(this) 
        : new HashHistory(this);
    }
  }

• 监听 URL 变化
  Hash 模式通过 window.addEventListener('hashchange') 监听；History 模式通过 popstate 事件监听。

• 路由跳转
  调用 router.push 或 router.replace 时，会更新 URL 并触发路由匹配：

  push(location) {
    this.history.push(location);
  }

动态路由与懒加载

• 动态路由
  通过 :param 定义动态路径（如 /user/:id），匹配时提取参数并传递给组件。
• 懒加载
  使用动态导入（import()）实现按需加载组件：

  const User = () => import('./User.vue');

总结

Vue Router 通过结合前端路由技术与 Vue 的响应式系统，实现了无刷新页面切换、动态组件渲染和导航控制。其核心在于 URL 监听、路由匹配和组件渲染的协同工作。