vue router 实现原理
Vue Router 的实现原理
Vue Router 是 Vue.js 官方的路由管理器，其核心原理基于前端路由的实现方式，主要包括哈希模式（Hash Mode）和历史模式（History Mode）。以下是其核心实现机制：
哈希模式（Hash Mode）
哈希模式利用 URL 中的哈希部分（#）实现路由切换，不会触发页面刷新。
实现原理：
- 监听
hashchange事件，当 URL 的哈希部分变化时，触发路由匹配和组件渲染。 - 哈希变化不会向服务器发送请求，完全由前端控制。
示例代码：
window.addEventListener('hashchange', () => {
const hash = window.location.hash.slice(1); // 获取哈希部分
// 根据哈希匹配路由并渲染组件
});历史模式（History Mode）
历史模式基于 HTML5 的 history.pushState 和 history.replaceState API，允许修改 URL 而不刷新页面。
实现原理：
- 通过
pushState和replaceState修改 URL，并手动触发路由匹配。 - 监听
popstate事件，处理浏览器前进/后退操作。 - 需要服务器配置支持，避免直接访问子路由时返回 404。
示例代码：
// 修改 URL
history.pushState({}, '', '/new-route');
// 监听前进/后退
window.addEventListener('popstate', () => {
const path = window.location.pathname; // 获取路径
// 根据路径匹配路由
});路由匹配与组件渲染
Vue Router 的核心是通过路由配置表（routes）将 URL 路径映射到对应的组件。
流程：
- 解析当前 URL，获取路径（如
/home）。 - 根据路径匹配路由配置中的
path，找到对应的组件。 - 通过
<router-view>动态渲染匹配的组件。
路由配置示例：
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
];响应式路由
Vue Router 与 Vue 的响应式系统深度集成：
- 当前路由信息（如
$route）是响应式的，路径变化时会触发组件更新。 - 通过 Vue 的依赖追踪机制，自动重新渲染
<router-view>。
导航守卫
导航守卫（Navigation Guards）用于控制路由跳转的逻辑，如权限验证。
守卫类型：
- 全局守卫：
beforeEach、beforeResolve、afterEach。 - 路由独享守卫：
beforeEnter。 - 组件内守卫：
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。
示例：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});动态路由
通过 addRoute 动态添加路由，或利用 import() 实现懒加载。
动态添加路由：
router.addRoute({ path: '/new', component: NewComponent });懒加载：
const routes = [
{ path: '/lazy', component: () => import('./LazyComponent.vue') }
];总结
Vue Router 的核心是通过监听 URL 变化（哈希或历史 API），匹配路由配置，动态渲染组件，并结合 Vue 的响应式系统实现无缝导航。其设计兼顾了灵活性和性能，支持高级功能如导航守卫和动态路由。
