当前位置：首页 > VUE

vue route实现原理

2026-01-18 15:49:51VUE

Vue Router 实现原理

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

路由模式

Vue Router 支持两种路由模式：

Hash 模式：通过监听 window.onhashchange 事件实现路由切换。URL 中带有 # 符号，例如 http://example.com/#/home。
History 模式：基于 HTML5 History API（pushState 和 replaceState），URL 更简洁（如 http://example.com/home），但需要服务器配置支持。

核心实现机制

路由注册与匹配
- 通过 routes 配置定义路由规则，路由对象会被编译为路由映射表。
- 使用路径解析库（如 path-to-regexp）将路径转换为正则表达式，用于匹配当前 URL。
响应式路由
- Vue Router 通过 Vue 的响应式系统动态更新当前路由状态。
- 当前路由信息（如 $route）会被注入到 Vue 实例中，触发组件重新渲染。
导航守卫
- 全局守卫（如 beforeEach）、路由独享守卫（如 beforeEnter）和组件内守卫（如 beforeRouteEnter）控制导航流程。
- 守卫通过异步钩子函数实现，支持取消或重定向导航。
动态路由加载
- 支持懒加载路由组件，通过动态 import() 语法实现代码分割：
```
const User = () => import('./views/User.vue');
```

关键代码逻辑

初始化路由：

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

路由跳转：

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

Hash 模式监听：

window.addEventListener('hashchange', () => {
  this.transitionTo(getHash());
});

与 Vue 的集成

通过 Vue.mixin 向所有组件注入路由逻辑：

Vue.mixin({
  beforeCreate() {
    if (this.$options.router) {
      this._routerRoot = this;
      this._router = this.$options.router;
      this._router.init(this);
    }
  }
});