vue路由实现原理
Vue 路由实现原理
Vue Router 是 Vue.js 的官方路由管理器，其核心原理基于前端路由的实现机制，主要包括 Hash 模式和 History 模式两种方式。
Hash 模式
Hash 模式利用 URL 中的 hash（#）部分实现路由切换。由于 hash 变化不会导致页面刷新，因此可以通过监听 hashchange 事件来实现前端路由。
window.addEventListener('hashchange', () => {
const currentPath = window.location.hash.slice(1) || '/';
// 根据 currentPath 匹配路由并渲染组件
});Hash 模式的优点在于兼容性好，支持所有浏览器。缺点是 URL 中带有 #，不够美观。
History 模式
History 模式基于 HTML5 的 history.pushState 和 history.replaceState API，通过修改 URL 的路径部分实现路由切换，无需刷新页面。
window.addEventListener('popstate', () => {
const currentPath = window.location.pathname;
// 根据 currentPath 匹配路由并渲染组件
});History 模式需要服务器支持，以避免直接访问子路由时返回 404 错误。通常需要在服务器配置中将所有请求重定向到入口文件（如 index.html）。
路由匹配与组件渲染
Vue Router 的核心功能包括路由匹配和动态渲染组件。其实现主要包括以下步骤：
- 路由表解析：将用户定义的路由配置（如
routes数组）转换为内部的路由映射表。 - 路径匹配：根据当前 URL 路径，通过路由映射表找到对应的路由记录。
- 组件渲染：通过
<router-view>动态渲染匹配到的组件。
响应式原理
Vue Router 通过 Vue 的响应式系统实现路由与视图的同步。核心是通过一个响应式的 currentRoute 对象，当路由变化时触发视图更新。
const reactiveRoute = Vue.observable({
path: '/',
params: {},
query: {}
});
// 路由变化时更新 reactiveRoute
function updateRoute() {
reactiveRoute.path = currentPath;
// 更新 params 和 query
}导航守卫
导航守卫是 Vue Router 的重要特性，允许在路由切换前后执行钩子函数。其实现基于 Promise 链式调用，确保钩子函数按顺序执行。
function runQueue(queue, fn, cb) {
const step = index => {
if (index >= queue.length) return cb();
fn(queue[index], () => step(index + 1));
};
step(0);
}动态路由
动态路由通过路由参数（如 /user/:id）实现，Vue Router 内部使用路径解析库（如 path-to-regexp）将路径转换为正则表达式，用于匹配动态参数。
const regex = pathToRegexp('/user/:id');
const match = regex.exec('/user/123');
// match.params => { id: '123' }总结
Vue Router 的核心原理是通过监听 URL 变化，匹配路由配置，并动态渲染组件。其实现依赖于浏览器 API（Hash 或 History 模式）、Vue 的响应式系统以及路由解析算法。
