编辑“︁Vue Router基础路由”︁（章节）

= Vue Router基础路由 =

'''Vue Router'''是Vue.js官方的路由管理器，用于构建单页面应用程序（SPA）。它允许您在不刷新页面的情况下，通过URL变化来切换视图组件。

== 核心概念 ==

=== 什么是前端路由？ ===
传统多页应用每次导航都会导致页面刷新，而SPA通过前端路由实现：
* URL变化不引发页面刷新
* 根据URL映射到不同组件
* 浏览器历史记录管理

<mermaid>
graph LR
    A[URL变化] --> B[路由解析]
    B --> C[匹配组件]
    C --> D[渲染组件]
</mermaid>

=== 基本组成 ===
Vue Router包含三个核心部分：
1. '''路由配置'''：定义路径与组件的映射关系
2. '''路由器实例'''：创建路由管理器
3. '''路由视图'''：<code><router-view></code>组件作为渲染出口

== 安装与基本配置 ==

=== 安装 ===
通过npm安装：
<syntaxhighlight lang="bash">
npm install vue-router@4
</syntaxhighlight>

=== 基本配置示例 ===
<syntaxhighlight lang="javascript">
// main.js
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

const app = createApp({})
app.use(router)
app.mount('#app')
</syntaxhighlight>

== 路由定义详解 ==

=== 静态路由 ===
基本路径匹配：
<syntaxhighlight lang="javascript">
routes: [
  { path: '/', component: Home },
  { path: '/products', component: ProductList }
]
</syntaxhighlight>

=== 动态路由 ===
使用冒号(:)定义动态段：
<syntaxhighlight lang="javascript">
routes: [
  // 匹配 /user/123
  { path: '/user/:id', component: UserDetail }
]
</syntaxhighlight>

访问动态参数：
<syntaxhighlight lang="javascript">
// 在组件中
this.$route.params.id // 或
import { useRoute } from 'vue-router'
const route = useRoute()
route.params.id
</syntaxhighlight>

=== 嵌套路由 ===
使用<code>children</code>属性：
<syntaxhighlight lang="javascript">
routes: [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: '', component: DashboardHome }, // /dashboard
      { path: 'settings', component: DashboardSettings } // /dashboard/settings
    ]
  }
]
</syntaxhighlight>

== 导航方式 ==

=== 声明式导航 ===
使用<code><router-link></code>组件：
<syntaxhighlight lang="html">
<router-link to="/">首页</router-link>
<router-link :to="{ path: '/about' }">关于</router-link>
</syntaxhighlight>

=== 编程式导航 ===
通过路由器实例：
<syntaxhighlight lang="javascript">
// 方法1
this.$router.push('/about')

// 方法2 (Composition API)
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/about')

// 带参数
router.push({ path: '/user', query: { id: '123' } })
</syntaxhighlight>

== 实际案例：电商网站路由 ==

=== 路由配置 ===
<syntaxhighlight lang="javascript">
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      { path: '', component: Home },
      { path: 'products', component: ProductList },
      { path: 'products/:id', component: ProductDetail },
      { path: 'cart', component: ShoppingCart },
      { path: 'checkout', component: Checkout }
    ]
  },
  { path: '/login', component: Login }
]
</syntaxhighlight>

=== 路由守卫示例 ===
添加全局前置守卫：
<syntaxhighlight lang="javascript">
router.beforeEach((to, from) => {
  if (to.path === '/checkout' && !isAuthenticated) {
    return '/login'
  }
})
</syntaxhighlight>

== 常见问题 ==

=== 路由匹配优先级 ===
路由匹配顺序按照定义顺序，越具体的路径应该越靠后：
<syntaxhighlight lang="javascript">
// 错误顺序
routes: [
  { path: '/user/:id', component: UserDetail },
  { path: '/user/create', component: UserCreate } // 永远不会匹配
]

// 正确顺序
routes: [
  { path: '/user/create', component: UserCreate },
  { path: '/user/:id', component: UserDetail }
]
</syntaxhighlight>

=== 路由模式 ===
Vue Router支持两种历史模式：
* <code>createWebHistory</code> - 使用干净的URL（需要服务器配置）
* <code>createWebHashHistory</code> - 使用hash模式（URL带#）

== 进阶提示 ==

* 使用<code>props: true</code>将路由参数作为组件props传递
* 利用<code>meta</code>字段存储路由元信息
* 对于大型应用，考虑使用'''路由懒加载'''

<syntaxhighlight lang="javascript">
// 懒加载示例
const UserDetail = () => import('./views/UserDetail.vue')
</syntaxhighlight>

{{Warning|在生产环境中使用历史模式时，确保服务器已正确配置URL重写}}

== 总结 ==
Vue Router是构建Vue单页应用的核心工具，通过本教程您已学习：
* 路由基本配置方法
* 静态/动态路由定义
* 嵌套路由结构
* 声明式和编程式导航
* 实际应用场景配置

下一步可以学习'''路由守卫'''、'''路由过渡动画'''等高级特性。

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