vue-router实现原理
vue-router 的实现原理
vue-router 是 Vue.js 官方的路由管理器，其核心实现基于 Vue 的响应式系统和插件机制。以下是其主要实现原理的分解：
路由模式
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>重新渲染。
vue-router 的设计充分利用了 Vue 的响应式系统，确保路由变化与视图更新的高效同步。
