vue rooter 实现原理

Vue Router 的实现原理

Vue Router 是 Vue.js 的官方路由管理器，其核心原理基于前端路由的实现机制，主要包括路由映射、组件渲染和导航守卫等功能。

路由模式

Vue Router 支持两种路由模式：

• Hash 模式：通过 URL 的 hash（#）部分实现路由切换。Hash 变化不会触发页面刷新，但会触发 hashchange 事件。

  window.addEventListener('hashchange', () => {
    // 根据 hash 变化更新视图
  });

• History 模式：利用 HTML5 History API（pushState、replaceState）实现无刷新路由切换。需要服务器配置支持以避免直接访问子路由时返回 404。

  

  window.addEventListener('popstate', () => {
    // 根据 path 变化更新视图
  });

路由映射与组件渲染

Vue Router 通过路由配置将 URL 路径映射到对应的组件。当路由变化时，Vue Router 会动态渲染匹配的组件。

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

响应式路由匹配

Vue Router 利用 Vue 的响应式系统，将当前路由路径（$route.path）与路由配置动态匹配。当路径变化时，自动触发组件重新渲染。

导航守卫

导航守卫是路由跳转过程中的钩子函数，用于控制导航行为（如权限验证、页面跳转拦截等）。分为全局守卫、路由独享守卫和组件内守卫。

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

动态路由

支持通过 addRoute 动态添加路由配置，适用于权限管理等场景。

router.addRoute({ path: '/admin', component: Admin });

路由懒加载

通过动态导入（import()）实现路由组件的懒加载，优化首屏加载性能。

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

Vue Router 的核心是通过监听 URL 变化，动态匹配路由配置并渲染组件，同时提供导航控制和扩展能力，实现单页应用的无刷新跳转。