vue路由跳转实现原理

Vue 路由跳转实现原理

Vue Router 的核心原理基于前端路由的两种模式：Hash 模式和 History 模式。两者均通过监听 URL 变化实现无刷新跳转，但底层机制不同。

Hash 模式

Hash 模式利用 URL 中 # 后的部分（即 hash）实现路由切换。浏览器不会将 hash 部分发送到服务器，因此页面不会重新加载。

• URL 示例：http://example.com/#/home
• 原理：通过 window.location.hash 或 hashchange 事件监听变化，匹配对应的组件渲染。
• 特点：兼容性好（支持 IE8），无需服务器配置。

History 模式

History 模式基于 HTML5 的 history.pushState 和 history.replaceState API，允许直接修改 URL 路径而不触发页面刷新。

• URL 示例：http://example.com/home
• 原理：通过 pushState 修改 URL 并记录历史栈，监听 popstate 事件处理前进/后退。
• 特点：URL 更简洁，需服务器支持（避免 404 错误）。

核心实现步骤

1. 路由映射配置
   通过 routes 数组定义路径与组件的映射关系，Vue Router 会根据配置生成路由表。

   const routes = [
     { path: '/home', component: Home },
     { path: '/about', component: About }
   ];

2. 路由实例化
   创建 Router 实例时，根据模式选择初始化对应的路由系统（Hash/History）。

   const router = new VueRouter({
     mode: 'history', // 或 'hash'
     routes
   });

3. 路由跳转

   • 声明式导航：通过 <router-link> 组件触发跳转。
   • 编程式导航：调用 router.push() 或 router.replace() 方法。

   // 编程式跳转
   router.push('/home');

4. 组件渲染
   路由匹配成功后，Vue Router 会动态渲染 <router-view> 占位符中的对应组件。

5. 守卫钩子
   通过全局/路由独享/组件内守卫（如 beforeEach）控制跳转逻辑，实现权限校验等。

   router.beforeEach((to, from, next) => {
     if (to.meta.requiresAuth) next('/login');
     else next();
   });

底层 API 关键点

• Hash 模式：依赖 window.onhashchange 监听 URL 变化。
• History 模式：依赖 history.pushState 修改 URL，popstate 事件监听浏览器操作（前进/后退）。
• 路由匹配：通过路径解析（如动态参数 :id）和正则匹配实现组件查找。

注意事项

• History 模式需服务器配置（如 Nginx 的 try_files），确保任意路径返回 index.html。
• 路由懒加载可通过动态导入（() => import('./Component.vue')）优化性能。