当前位置：首页 > VUE

vue-router实现原理

2026-01-21 08:49:45VUE

vue-router 的实现原理

vue-router 是 Vue.js 官方的路由管理器，其核心实现基于 Vue 的响应式系统和插件机制。以下是其主要实现原理的分解：

vue-router实现原理

路由模式

vue-router 支持三种路由模式：

vue-router实现原理

Hash 模式：利用 URL 的 hash（#）部分实现路由切换，通过监听 hashchange 事件实现无刷新跳转。
History 模式：基于 HTML5 History API（pushState、replaceState），需要服务器支持以避免直接访问路径时返回 404。
Abstract 模式：用于非浏览器环境（如 Node.js 或移动端原生应用），通过内存管理路由状态。

核心类与机制

Router 类：管理路由映射表（routes），提供 push、replace 等方法。通过 Vue.mixin 向所有组件注入 $route 和 $router 属性。
Matcher：负责路径匹配，将 URL 解析为对应的路由记录（RouteRecord），通过路径解析库（如 path-to-regexp）实现动态参数匹配。
响应式更新：当前路由对象 currentRoute 是响应式的，Vue 组件通过 this.$route 访问时会自动触发依赖收集和更新。

路由组件渲染

<router-view>：作为动态组件，根据当前路由的 matched 数组渲染匹配的组件层级，通过 Vue 的 <component :is=""> 实现。
<router-link>：生成带有路由跳转逻辑的 <a> 标签，默认使用 router.push，支持激活类名（router-link-active）的自动匹配。

导航守卫

通过路由配置的 beforeEach、beforeResolve 等钩子函数实现导航控制，守卫函数按顺序执行，支持异步操作（如返回 Promise）。

代码示例

// 路由定义示例
const routes = [
  { path: '/', component: Home },
  { path: '/user/:id', component: User }
];

// 路由初始化
const router = new VueRouter({
  mode: 'history',
  routes
});

// 导航守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) next('/login');
  else next();
});

动态路由

通过 router.addRoutes（Vue Router 3.x）或 router.addRoute（Vue Router 4.x）动态添加路由，内部会重新生成路由映射表。

关键源码逻辑

初始化：在 Vue.use(Router) 时，通过 install 方法混入生命周期钩子。
路径切换：调用 push 或 replace 触发 transitionTo 方法，解析目标路由并执行导航守卫。
视图更新：通过 Vue.util.defineReactive 将 current 设为响应式，触发 <router-view> 重新渲染。