vue 路由实现机制

Vue 路由实现机制

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。其核心机制包括路由匹配、组件渲染和导航守卫等功能。

路由匹配机制

Vue Router 通过路由配置表（routes）定义路径与组件的映射关系。路由匹配基于路径解析和动态参数匹配：

• 静态路径匹配：如 /home 直接匹配对应组件。
• 动态路径匹配：如 /user/:id 通过冒号标记动态参数。
• 嵌套路由：通过 children 配置实现层级路由。

路由匹配算法基于优先级排序，先匹配的规则优先生效。

组件渲染机制

路由通过 <router-view> 组件动态渲染匹配的组件：

• 路由变化时，<router-view> 会根据当前路径渲染对应的组件。
• 嵌套路由中，子路由的 <router-view> 需定义在父组件模板中。
• 组件实例会被复用，通过生命周期钩子（如 beforeRouteUpdate）处理更新逻辑。

导航守卫

导航守卫用于控制路由跳转的权限或逻辑：

• 全局守卫：router.beforeEach、router.afterEach。
• 路由独享守卫：在路由配置中定义 beforeEnter。
• 组件内守卫：beforeRouteEnter、beforeRouteLeave。

守卫函数接收 to、from 和 next 参数，通过调用 next() 继续导航或中断跳转。

编程式导航

通过 router.push、router.replace 等方法实现代码跳转：

router.push('/home') // 跳转到首页
router.replace('/login') // 替换当前路由
router.go(-1) // 返回上一页

路由模式

Vue Router 支持两种路由模式：

• hash 模式：通过 URL 的 hash（#）实现，兼容性好。
• history 模式：基于 HTML5 History API，需服务器配置支持。

配置示例：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

动态路由

通过 router.addRoutes 动态添加路由（Vue Router 3.x）或 router.addRoute（Vue Router 4.x）：

router.addRoute({ path: '/new', component: NewComponent })

路由懒加载

结合 Webpack 的代码分割功能实现懒加载：

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

Vue Router 的机制通过上述功能协同工作，实现了 SPA 的无刷新跳转和状态管理。