vue-routet实现原理

Vue Router 的实现原理

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

路由模式

Vue Router 支持两种路由模式：hash 模式和 history 模式。

Hash 模式

• 通过监听 window.onhashchange 事件实现路由切换。
• URL 中的 # 符号及其后面的部分不会发送到服务器。
• 兼容性较好，适用于所有浏览器。

History 模式

• 基于 HTML5 History API（pushState 和 replaceState）。
• URL 更加简洁，但需要服务器配置支持，避免直接访问子路由时返回 404。
• 通过监听 popstate 事件实现路由切换。

路由匹配

Vue Router 通过路由配置表（routes 数组）进行路由匹配。匹配过程基于路径解析和动态路由参数。

const routes = [
  { path: '/user/:id', component: User }
]

组件渲染

路由匹配成功后，Vue Router 会动态渲染对应的组件。通过 <router-view> 标签作为组件的占位符，实现嵌套路由和组件层级渲染。

<router-view></router-view>

导航守卫

导航守卫用于控制路由跳转的逻辑，包括全局守卫、路由独享守卫和组件内守卫。

• 全局前置守卫：router.beforeEach
• 路由独享守卫：beforeEnter
• 组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

router.beforeEach((to, from, next) => {
  // 逻辑处理
  next();
});

响应式原理

Vue Router 通过 Vue 的响应式系统实现路由变化时的视图更新。currentRoute 是一个响应式对象，当路由变化时，依赖该对象的组件会自动重新渲染。

动态路由

动态路由通过 addRoute 方法实现路由表的动态添加，适用于权限控制等场景。

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

路由懒加载

通过动态导入（import()）实现路由懒加载，优化页面加载性能。

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

Vue Router 的实现结合了 Vue.js 的响应式系统和前端路由技术，提供了灵活的路由管理和组件渲染机制。