vue路由实现机制
Vue 路由实现机制
Vue 路由的核心是通过 vue-router 库实现的，其机制主要基于前端路由的两种模式：Hash 模式和 History 模式。以下是具体实现原理和关键机制：
Hash 模式
Hash 模式利用 URL 的哈希部分（#）实现路由切换，不会触发页面刷新。
- URL 格式：
http://example.com/#/path - 原理：通过监听
hashchange事件，动态匹配路由规则并渲染对应组件。 - 优势：兼容性高，无需服务器配置。
window.addEventListener('hashchange', () => {
const currentPath = window.location.hash.slice(1) || '/';
// 根据 currentPath 匹配组件并渲染
});History 模式
History 模式基于 HTML5 的 history.pushState API，URL 更简洁（无 #）。
- URL 格式：
http://example.com/path - 原理：通过
pushState和replaceState修改 URL，监听popstate事件处理导航。 - 注意：需服务器支持，避免 404 错误（需配置重定向到
index.html）。
window.addEventListener('popstate', () => {
const currentPath = window.location.pathname;
// 匹配路由并渲染组件
});路由匹配与组件渲染
-
路由表配置：通过
routes数组定义路径与组件的映射关系。const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; -
动态路由：支持参数化路径（如
/user/:id），通过$route.params获取参数。
-
路由守卫：通过全局或局部守卫（如
beforeEach）控制导航流程。router.beforeEach((to, from, next) => { if (to.meta.requiresAuth) next('/login'); else next(); });
响应式更新
Vue Router 与 Vue 实例深度集成，通过响应式依赖：
$route对象是响应式的，路径变化会自动触发组件更新。<router-view>作为动态组件容器，根据当前路径渲染匹配的组件。
关键 API
- 导航方法：
router.push()：跳转到新路由。router.replace()：替换当前路由（无历史记录）。
- 懒加载：动态导入组件提升性能。
{ path: '/admin', component: () => import('./Admin.vue') }
总结
Vue Router 通过监听 URL 变化、匹配路由规则、动态渲染组件实现单页应用（SPA）的路由功能。选择 Hash 或 History 模式需根据项目需求及服务器环境决定。
