vue路由实现原理
Vue 路由实现原理
Vue Router 是 Vue.js 的官方路由管理器，其核心原理基于前端路由的实现方式，主要包括哈希模式（Hash Mode）和历史模式（History Mode）。
哈希模式
哈希模式利用 URL 中的哈希部分（#）实现路由切换，不会触发页面刷新。
- 通过监听
hashchange事件实现路由变化。 - URL 格式示例：
http://example.com/#/home。 - 哈希变化不会导致浏览器向服务器发送请求，完全由前端控制。
window.addEventListener('hashchange', () => {
const currentPath = window.location.hash.slice(1) || '/';
// 根据路径匹配组件并渲染
});历史模式
历史模式基于 HTML5 的 history.pushState 和 history.replaceState API，允许修改 URL 而不刷新页面。
- 通过监听
popstate事件实现路由变化（用户点击后退/前进按钮时触发）。 - URL 格式示例：
http://example.com/home。 - 需要服务器配置支持，避免直接访问子路径时返回 404。
window.addEventListener('popstate', () => {
const currentPath = window.location.pathname;
// 根据路径匹配组件并渲染
});核心实现步骤
-
路由映射配置
通过routes配置定义路径与组件的映射关系，生成路由表。
-
路由初始化
根据当前 URL 路径匹配路由表，渲染对应组件。 -
路由切换
- 哈希模式：修改
window.location.hash触发hashchange。 - 历史模式：调用
history.pushState或history.replaceState更新 URL。
- 哈希模式：修改
-
组件渲染
通过<router-view>动态渲染匹配的组件，并触发路由守卫（如beforeEach）。
动态路由匹配
通过 :param 语法定义动态路径参数，路由实例会解析参数并传递给组件。
const routes = [
{ path: '/user/:id', component: User }
];路由守卫
提供全局或组件级钩子（如 beforeEnter、beforeRouteLeave），用于权限控制或数据预加载。
响应式原理
Vue Router 与 Vue 的响应式系统深度集成，路由变化时会触发组件更新，确保视图与 URL 同步。
