vue-router底层实现
vue-router 的底层实现原理
vue-router 是 Vue.js 官方的路由管理器，其底层实现主要依赖于浏览器提供的 History API 或 hash 模式来管理 URL 变化，并通过 Vue 的响应式系统实现视图与 URL 的同步更新。
核心机制
路由模式 vue-router 支持三种路由模式：
hash模式：利用 URL 的 hash（#）部分实现路由切换，兼容性好，无需服务器配置。history模式：基于 HTML5 History API（pushState、replaceState），URL 更简洁，但需服务器支持。abstract模式：用于非浏览器环境（如 Node.js 或移动端原生应用），通过内存模拟路由。
路由匹配
通过 path-to-regexp 库将路由配置的路径解析为正则表达式，实现动态路由参数匹配。例如：
const regex = pathToRegexp("/user/:id");
const match = regex.exec("/user/123"); // { id: "123" }响应式更新
vue-router 将当前路由信息（如 $route）注入 Vue 实例，利用 Vue 的响应式系统触发组件更新。当 URL 变化时，$route 对象会自动更新，驱动视图重新渲染。
关键实现代码片段
路由初始化
class VueRouter {
constructor(options) {
this.mode = options.mode || "hash";
this.routes = options.routes || [];
this.matcher = createMatcher(this.routes);
this.history = new HashHistory(this); // 或 HistoryHistory
}
}导航守卫 通过钩子函数队列实现导航守卫逻辑：
function runQueue(queue, fn, cb) {
const step = index => {
if (index >= queue.length) return cb();
fn(queue[index], () => step(index + 1));
};
step(0);
}URL 监听
hash 模式通过 hashchange 事件监听：
window.addEventListener("hashchange", () => {
this.transitionTo(getHash());
});history 模式通过 popstate 事件监听：
window.addEventListener("popstate", e => {
this.transitionTo(location.pathname);
});路由切换流程
- 触发导航（如
router.push或用户点击链接）。 - 解析目标路由，匹配对应组件。
- 执行导航守卫（如
beforeEach）。 - 确认导航后更新 URL 和视图。
- 触发
afterEach钩子。
