当前位置：首页 > VUE

vue route的实现原理

2026-01-20 04:15:20VUE

Vue Router 的实现原理

Vue Router 是 Vue.js 官方提供的路由管理器，其核心原理基于前端路由技术，通过监听 URL 变化动态渲染组件。以下是其核心实现机制：

路由模式

Vue Router 支持两种路由模式：

vue route的实现原理

Hash 模式：利用 URL 的 hash（#）部分实现路由切换。hash 变化不会触发页面刷新，但会触发 hashchange 事件。例如：
```
window.addEventListener('hashchange', () => {
  // 根据 hash 更新视图
});
```
History 模式：基于 HTML5 History API（pushState、replaceState），通过修改路径实现无刷新跳转。需服务器配置支持，避免直接访问子路由时返回 404。

路由映射

路由表通过 routes 配置项定义，将路径与组件映射。Vue Router 内部会将路由配置转换为路径匹配规则，例如：

vue route的实现原理

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

路由切换流程

URL 变化触发：用户点击 <router-link> 或手动调用 router.push()，触发路由切换。
匹配目标路由：根据当前 URL 和路由配置，解析出匹配的路由记录（RouteRecord）。
导航守卫执行：依次调用全局守卫、组件守卫等，允许取消或重定向导航。
组件渲染：通过 <router-view> 动态渲染匹配的组件，并触发生命周期钩子（如 beforeRouteEnter）。

响应式机制

Vue Router 利用 Vue 的响应式系统，将当前路由信息（如 $route）注入到组件实例中。当路由变化时，依赖 $route 的组件会自动更新。

核心代码结构

Router 类：管理路由配置、导航逻辑和守卫。
Matcher：负责路径匹配，生成路由对象。
History 类：抽象不同模式的路由行为（Hash/History）。
组件：<router-view> 和 <router-link> 提供渲染和导航功能。

示例：手动实现简单路由

以下是一个简化的路由实现示例（Hash 模式）：

class SimpleRouter {
  constructor(routes) {
    this.routes = routes;
    window.addEventListener('hashchange', this.handleHashChange.bind(this));
  }

  handleHashChange() {
    const path = window.location.hash.slice(1) || '/';
    const route = this.routes.find(r => r.path === path);
    if (route) {
      document.getElementById('app').innerHTML = route.component;
    }
  }
}