Vue Router简介

Vue Router简介

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。它允许开发者通过不同的 URL 路径映射到不同的组件，实现页面间的无刷新跳转和动态加载。Vue Router 与 Vue.js 深度集成，提供了声明式的路由配置和强大的导航控制功能。

核心概念

Vue Router 的核心功能包括：

• 路由映射：将 URL 路径与组件关联。
• 动态路由：支持参数化的路径匹配。
• 嵌套路由：允许子路由在父路由的组件中渲染。
• 编程式导航：通过 JavaScript 控制路由跳转。
• 导航守卫：在路由跳转前后执行逻辑（如权限验证）。

基本用法

以下是一个简单的 Vue Router 配置示例：

// 1. 引入 Vue 和 Vue Router
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

// 2. 定义路由组件
const Home = { template: '<div>Home Page</div>' }
const About = { template: '<div>About Page</div>' }

// 3. 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

// 4. 挂载到 Vue 应用
const app = createApp({})
app.use(router)
app.mount('#app')

关键点说明

• createRouter：创建路由实例。
• createWebHistory：使用 HTML5 History API 实现无哈希（#）的 URL。
• routes：定义路径与组件的映射关系。

动态路由示例

动态路由允许通过参数匹配路径：

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

在组件中可通过 this.$route.params.id（Options API）或 useRoute().params.id（Composition API）获取参数。

嵌套路由

通过 children 配置子路由：

routes: [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: 'profile', component: Profile },
      { path: 'settings', component: Settings }
    ]
  }
]

导航守卫

守卫函数用于控制路由跳转：

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

实际应用场景

1. 用户仪表盘：通过嵌套路由组织用户主页、个人资料和设置页面。 2. 电商网站：动态路由匹配商品 ID 显示详情页。 3. 权限控制：使用导航守卫限制未登录用户访问特定页面。

路由模式对比

pie title 路由模式使用比例 "Hash 模式" : 30 "History 模式" : 70

• Hash 模式：URL 带 #，兼容性更好（如 http://example.com/#/home）。
• History 模式：需服务器支持，URL 更简洁（如 http://example.com/home）。

数学表达（可选）

路由匹配优先级可通过路径权重计算： $W(path)=\sum _{i=1}^n\frac{1}{2^{d_i}}$ 其中 $d_i$ 为动态段（如 :id）的深度。

总结

Vue Router 是构建 Vue SPA 的核心工具，通过声明式配置和灵活的 API 实现了：

• 页面组件的高效切换
• URL 与视图状态的同步
• 复杂的导航逻辑控制

初学者可从基础路由配置开始，逐步掌握动态路由、嵌套路由等高级特性。