vue router实现原理
Vue Router 的实现原理
Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页面应用（SPA）。其核心实现原理包括路由映射、动态组件切换和 URL 同步机制。
路由模式
Vue Router 支持两种路由模式：
- Hash 模式：通过 URL 的 hash（
#）部分实现路由切换。例如http://example.com/#/home。Hash 变化不会触发页面刷新，但会触发hashchange事件。 - History 模式：基于 HTML5 History API（
pushState、replaceState），URL 更简洁（如http://example.com/home）。需要服务器配置支持，避免直接访问子路由时返回 404。
核心机制
-
路由表解析
Vue Router 通过配置的路由表（routes）生成路由映射关系。每个路由对象包含path、component等属性，支持动态路由参数（如/user/:id）。 -
响应式路由匹配
内部通过matcher将路由表转换为可匹配的路径映射。当 URL 变化时，Router 会匹配当前路径对应的组件，并通过 Vue 的响应式系统更新视图。
-
动态组件渲染
路由匹配后，<router-view>作为占位符会动态渲染目标组件。Vue Router 利用 Vue 的动态组件（<component :is="...">）机制实现组件切换。 -
导航守卫
提供全局/路由独享/组件级的守卫钩子（如beforeEach、beforeRouteEnter），用于控制导航流程（如权限验证、数据预加载）。
关键代码逻辑
-
Hash 模式监听
通过window.addEventListener('hashchange', callback)监听 URL 变化。
window.addEventListener('hashchange', () => { this.transitionTo(window.location.hash.slice(1)); }); -
History 模式监听
使用popstate事件监听浏览器前进/后退：window.addEventListener('popstate', (e) => { this.transitionTo(window.location.pathname); }); -
路由跳转
push或replace方法触发导航，并更新视图：push(location) { this.history.push(location); // 调用 History API 或修改 hash this.transitionTo(location); // 匹配路由并渲染组件 }
依赖的浏览器 API
- Hash 模式：
window.location.hash、hashchange事件。 - History 模式：
history.pushState、history.replaceState、popstate事件。
与 Vue 的集成
Vue Router 通过插件形式安装，向 Vue 实例注入 $router 和 $route 属性，并全局注册 <router-link> 和 <router-view> 组件。
通过上述机制，Vue Router 实现了无刷新页面切换的 SPA 体验，同时保持 URL 与视图同步。
