编辑“︁Vue Router简介”︁

= Vue Router简介 =

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

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

== 基本用法 ==
以下是一个简单的 Vue Router 配置示例：

<syntaxhighlight lang="javascript">
// 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')
</syntaxhighlight>

=== 关键点说明 ===
* '''<code>createRouter</code>'''：创建路由实例。
* '''<code>createWebHistory</code>'''：使用 HTML5 History API 实现无哈希（#）的 URL。
* '''<code>routes</code>'''：定义路径与组件的映射关系。

== 动态路由示例 ==
动态路由允许通过参数匹配路径：
<syntaxhighlight lang="javascript">
routes: [
  { path: '/user/:id', component: User }
]
</syntaxhighlight>
在组件中可通过 <code>this.$route.params.id</code>（Options API）或 <code>useRoute().params.id</code>（Composition API）获取参数。

== 嵌套路由 ==
通过 <code>children</code> 配置子路由：
<syntaxhighlight lang="javascript">
routes: [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: 'profile', component: Profile },
      { path: 'settings', component: Settings }
    ]
  }
]
</syntaxhighlight>

== 导航守卫 ==
守卫函数用于控制路由跳转：
<syntaxhighlight lang="javascript">
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) next('/login')
  else next()
})
</syntaxhighlight>

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

== 路由模式对比 ==
<mermaid>
pie
    title 路由模式使用比例
    "Hash 模式" : 30
    "History 模式" : 70
</mermaid>

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

== 数学表达（可选） ==
路由匹配优先级可通过路径权重计算：
<math>
W(path) = \sum_{i=1}^{n} \frac{1}{2^{d_i}}
</math>
其中 <math>d_i</math> 为动态段（如 <code>:id</code>）的深度。

== 总结 ==
Vue Router 是构建 Vue SPA 的核心工具，通过声明式配置和灵活的 API 实现了：
* 页面组件的高效切换
* URL 与视图状态的同步
* 复杂的导航逻辑控制

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

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue Router路由]]