vue-router 的实现原理

Vue-router 的核心原理主要基于以下几个关键点：

1. Vue 插件机制

Vue-router 是一个 Vue.js 官方插件，通过 Vue.use() 方法注册，利用 Vue.mixin 在所有组件中注入 $router 和 $route，使得每个组件都能访问路由信息。

2. Hash 模式与 History 模式（路由模式）

Vue-router 支持两种路由模式：

• hash 模式：利用 URL 的 hash（即 # 后面的部分），通过监听 window.onhashchange 事件实现路由切换，无需服务器配置。
• history 模式：利用 HTML5 的 history.pushState API 实现无 # 的 URL，需要服务器支持（避免刷新 404），通过监听 popstate 事件处理浏览器前进后退。

3. 路由匹配与路由表

开发者定义一组路由规则（routes 数组），Vue-router 内部会根据当前 URL 匹配对应的路由记录，生成对应的组件树，通常结合 <router-view> 动态渲染匹配到的组件。

4. 导航守卫与路由生命周期

提供 beforeEach、beforeResolve、afterEach 等导航守卫，控制路由跳转逻辑，如权限校验、数据预加载等。

5. 响应式路由对象

$route 是一个响应式对象，包含当前路径、参数、查询等信息，当路由变化时，依赖它的组件会自动更新。6. **动态路由与懒加载** 支持动态路径参数，以及通过 import() 语法实现路由组件的懒加载，优化首屏性能。总结：Vue-router 的核心就是通过监听 URL 变化（hash 或 history），根据路由规则匹配对应组件，并利用 Vue 的响应式系统和组件系统，动态渲染页面，同时提供灵活的导航控制和路由管理能力。