当前位置：首页 > VUE

vue 路由实现原理

2026-01-17 02:10:43VUE

Vue 路由实现原理

Vue Router 是 Vue.js 官方的路由管理器，其核心原理基于前端路由的实现方式。以下是 Vue Router 的主要实现机制：

路由模式

Vue Router 支持两种路由模式：

Hash 模式：利用 URL 的 hash（#）部分实现路由切换。Hash 变化不会触发页面刷新，通过监听 hashchange 事件实现路由跳转。
History 模式：基于 HTML5 History API（pushState 和 replaceState），通过监听 popstate 事件实现路由切换。需要服务器配置支持以避免 404 问题。

核心实现步骤

路由映射配置
- 通过 routes 配置定义路径与组件的映射关系，生成路由表。
- 示例配置：
```
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]
```
路由初始化
- 创建 Router 实例时，会根据当前 URL 路径匹配路由表，渲染对应的组件。
- 初始化阶段会监听路由变化事件（hashchange 或 popstate）。
路由切换
- 调用 router.push 或 router.replace 时，会根据模式调用 window.location.hash 或 history.pushState 修改 URL。
- URL 变化后触发事件监听，重新匹配路由并渲染组件。
组件渲染
- 通过 <router-view> 动态渲染匹配的组件，利用 Vue 的响应式系统实现视图更新。

关键代码逻辑

路由匹配：通过 path-to-regexp 库将路径字符串转换为正则表达式，实现动态路由匹配。
守卫机制：通过全局守卫、路由独享守卫和组件内守卫控制导航流程。
响应式更新：当前路由信息（如 $route）是响应式的，组件会自动更新。

实现示例（简化版）

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

vue 路由实现原理

class VueRouter {
  constructor(options) {
    this.routes = options.routes
    this.current = window.location.hash.slice(1) || '/'
    window.addEventListener('hashchange', () => {
      this.current = window.location.hash.slice(1)
    })
  }
}

Vue.mixin({
  beforeCreate() {
    if (this.$options.router) {
      Vue.util.defineReactive(this, '_route', this.$options.router.current)
    }
  }
})

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})