vue路由跳转实现原理
Vue 路由跳转实现原理
Vue Router 是 Vue.js 官方提供的路由管理器，其核心原理基于前端路由的实现机制，主要包括哈希模式（Hash Mode）和历史模式（History Mode）。
哈希模式（Hash Mode）
哈希模式利用 URL 中的哈希（#）部分实现路由切换。哈希的变化不会触发页面刷新，但会触发 hashchange 事件。
- URL 示例：
http://example.com/#/home - 原理：
浏览器监听
hashchange事件，当哈希部分变化时，Vue Router 会根据哈希值匹配对应的路由组件并渲染。 哈希模式兼容性较好，无需服务器额外配置。
历史模式（History Mode）
历史模式基于 HTML5 的 history.pushState 和 history.replaceState API，允许直接修改 URL 路径而不刷新页面。
- URL 示例：
http://example.com/home - 原理：
通过
pushState或replaceState修改 URL，同时更新路由状态。 需要服务器支持，确保在直接访问或刷新页面时返回正确的 HTML 文件（通常配置为返回index.html）。
路由跳转的核心流程
-
路由匹配
当 URL 变化时，Vue Router 会根据配置的路由表（routes）匹配对应的路由记录，找到目标组件。 -
导航守卫
在跳转前后触发导航守卫（如beforeEach、beforeResolve、afterEach），用于权限控制或数据预加载。
-
组件渲染
匹配成功后，Vue Router 会动态渲染目标组件到<router-view>占位符中，并触发组件的生命周期钩子（如created、mounted）。 -
状态更新
更新 Vue Router 内部状态（如$route对象），包含当前路由的路径、参数、查询等信息。
代码示例
// 路由配置
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
];
// 路由跳转方法
// 编程式导航
router.push('/home'); // 跳转到 /home
router.replace('/about'); // 替换当前路由
// 声明式导航（模板中）
<router-link to="/home">Home</router-link>关键 API 解析
router.push：向历史栈添加新记录，触发导航。router.replace：替换当前历史记录，不添加新条目。router.go：在历史栈中前进或后退，类似window.history.go。
注意事项
- 历史模式需服务器配置，避免 404 错误。
- 哈希模式无需服务器支持，但 URL 不够美观。
- 导航守卫可用于全局或局部路由控制，如登录验证。
