vue的路由实现原理
Vue 路由实现原理
Vue Router 是 Vue.js 官方的路由管理器，其核心原理基于前端路由的实现机制，主要包括哈希模式（Hash Mode）和历史模式（History Mode）两种方式。
哈希模式
哈希模式利用 URL 中的哈希部分（#）来实现路由切换，不会触发页面刷新。
监听 hashchange 事件，当哈希值变化时，动态渲染对应的组件。
哈希模式兼容性较好，适用于所有浏览器。
window.addEventListener('hashchange', () => {
const currentHash = window.location.hash.slice(1);
// 根据哈希值渲染对应组件
});历史模式
历史模式基于 HTML5 的 history.pushState 和 history.replaceState API，通过修改 URL 的路径实现路由切换。
监听 popstate 事件，当用户点击浏览器的前进或后退按钮时，动态渲染对应组件。
需要服务器配置支持，避免直接访问子路由时返回 404。
window.addEventListener('popstate', () => {
const currentPath = window.location.pathname;
// 根据路径渲染对应组件
});核心实现步骤
Vue Router 的核心是通过维护一个路由映射表（routes 配置），将 URL 与组件关联起来。
通过响应式机制，当前路由变化时自动触发视图更新。
-
路由映射表
将用户配置的路由规则解析为路径与组件的映射关系，例如：const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ]; -
路由匹配
根据当前 URL 路径（或哈希）匹配路由配置，找到对应的组件。
-
动态渲染
通过 Vue 的动态组件（<router-view>）或渲染函数，将匹配到的组件渲染到页面中。 -
导航守卫
提供全局或路由独享的钩子函数（如beforeEach），用于控制路由跳转逻辑。
响应式原理
Vue Router 通过 Vue 的响应式系统，将当前路由信息（如 $route）注入到每个组件中。
当路由变化时，触发依赖更新，重新渲染对应的视图组件。
// 简化的响应式实现
class VueRouter {
constructor(options) {
this.current = window.location.hash.slice(1) || '/';
window.addEventListener('hashchange', () => {
this.current = window.location.hash.slice(1);
});
}
}总结
Vue Router 的核心是通过监听 URL 变化，匹配路由配置，并利用 Vue 的响应式机制动态渲染组件。
哈希模式和历史模式分别通过 hashchange 和 popstate 事件实现无刷新路由切换。
导航守卫和路由映射表提供了灵活的跳转控制和配置能力。
