vue路由实现原理

Vue 路由实现原理

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。其核心原理基于前端路由的实现方式，主要包括以下机制：

路由模式

Vue Router 支持两种路由模式：

• Hash 模式：利用 URL 中的 hash（#）部分实现路由切换。hash 变化不会触发页面刷新，但会触发 hashchange 事件。例如：

  window.addEventListener('hashchange', () => {
    // 根据 hash 更新视图
  });

• History 模式：基于 HTML5 History API（pushState、replaceState），通过修改路径实现无刷新跳转。需要服务器配置支持，以避免直接访问路径时返回 404。例如：

  history.pushState({}, '', '/new-path');

核心实现机制

1. 路由映射表
   Vue Router 通过配置的路由表（routes）建立路径与组件的映射关系。例如：

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

2. 动态路由匹配
   通过路径参数（如 :id）或正则表达式实现动态路由匹配。匹配结果会作为 props 传递给组件。

3. 响应式更新
   当前路由路径（currentRoute）是响应式的，当路径变化时，Vue Router 会自动触发组件重新渲染。

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

关键代码逻辑

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

  class Router {
    constructor(options) {
      this.mode = options.mode || 'hash';
      if (this.mode === 'hash') {
        window.addEventListener('hashchange', this.handleHashChange);
      } else {
        window.addEventListener('popstate', this.handlePopState);
      }
    }
  }

• 路由跳转
  router.push 方法会根据模式调用对应的 API：

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

组件渲染

Vue Router 通过 <router-view> 组件动态渲染匹配的路由组件，其核心是一个响应式渲染器：

const component = computed(() => {
  return matchedRoute.component;
});

总结

Vue Router 的核心是通过监听 URL 变化，结合路由配置表动态渲染组件，同时利用响应式系统确保视图与路由状态同步。其设计兼顾了灵活性和性能，是构建 SPA 的关键工具。