vue实现路由的原理

Vue 路由实现原理

Vue Router 是 Vue.js 官方的路由管理器，其核心原理基于前端路由的实现方式，主要通过监听 URL 变化并动态渲染对应组件。

核心机制

Hash 模式 利用 URL 中的 hash（#）部分实现路由切换。hash 变化不会触发页面刷新，但会触发 hashchange 事件。Vue Router 监听该事件并匹配对应组件。

window.addEventListener('hashchange', () => {
  const currentPath = window.location.hash.slice(1) || '/';
  // 根据 currentPath 匹配组件并渲染
});

History 模式 基于 HTML5 History API（pushState/replaceState），通过修改路径实现无刷新跳转。需服务器配置支持以避免直接访问子路径时返回 404。

window.history.pushState({}, '', '/new-path');
// 手动触发 popstate 事件或监听路由变化

关键实现步骤

路由表映射 通过配置的路由表（routes）建立路径与组件的映射关系。匹配时按顺序检查路径，支持动态参数（如 /user/:id）。

动态渲染 路由变化时，根据当前路径从路由表中找到匹配的组件，通过 <router-view> 动态渲染目标组件。嵌套路由通过层级 <router-view> 实现。

导航守卫 提供全局或路由独享的钩子函数（如 beforeEach），可在路由跳转前后执行逻辑（如权限校验）。

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

进阶特性

路由懒加载 结合动态导入（import()）实现组件按需加载，提升首屏性能。

const User = () => import('./views/User.vue');

路由过渡效果 通过 <transition> 组件包裹 <router-view>，结合 CSS 或 JavaScript 钩子实现切换动画。

滚动行为控制 通过 scrollBehavior 自定义路由切换后的页面滚动位置。

const router = new VueRouter({
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { x: 0, y: 0 };
  }
});

注意事项

• History 模式需服务器支持，确保所有路径返回 index.html。
• 动态路由参数变化时，组件实例可能复用，需通过 watch 监听 $route 或使用导航守卫处理更新。
• 避免在路由组件中直接修改路由状态，应使用 $router.push 等方法。