当前位置：首页 > VUE

vue路由的实现原理

2026-02-24 13:21:49VUE

Vue 路由的实现原理

Vue 路由的核心是通过监听 URL 的变化，动态匹配路由配置，并渲染对应的组件。以下是其实现的关键点：

路由模式

Vue Router 支持两种路由模式：

Hash 模式：通过 URL 的 hash（#）部分实现路由切换。hash 变化不会触发页面刷新，但会触发 hashchange 事件。
```
window.addEventListener('hashchange', () => {
  // 根据 hash 更新视图
});
```
History 模式：基于 HTML5 History API（pushState、replaceState），URL 更简洁，但需要服务器配置支持。
```
window.addEventListener('popstate', () => {
  // 根据路径更新视图
});
```

路由匹配

路由配置是一个数组，每个路由对象包含 path 和 component。Vue Router 会根据当前 URL 的路径，通过路径匹配算法（如动态路由、嵌套路由）找到对应的组件。

响应式更新

Vue Router 利用 Vue 的响应式系统，将当前路由信息（如 $route）注入到 Vue 实例中。当路由变化时，触发视图的重新渲染。

vue路由的实现原理

导航守卫

通过导航守卫（如 beforeEach、beforeResolve）控制路由跳转的逻辑，允许在路由切换前进行权限校验或数据加载。

动态路由

支持通过 addRoute 动态添加路由配置，适用于权限管理等场景。

核心代码示例

以下是一个简化的路由实现示例：

class VueRouter {
  constructor(options) {
    this.routes = options.routes;
    this.mode = options.mode || 'hash';
    this.current = { path: '/' };

    if (this.mode === 'hash') {
      window.addEventListener('load', () => {
        this.current.path = location.hash.slice(1) || '/';
      });
      window.addEventListener('hashchange', () => {
        this.current.path = location.hash.slice(1) || '/';
      });
    } else {
      window.addEventListener('popstate', () => {
        this.current.path = location.pathname;
      });
    }
  }
}