编辑“︁Vue Router安装配置”︁

{{DISPLAYTITLE:Vue Router安装配置}}

'''Vue Router''' 是 [[Vue.js]] 的官方路由管理器，用于构建单页面应用（SPA）。它允许开发者通过不同的 URL 访问不同的组件，从而实现页面间的无刷新跳转。本教程将详细介绍 Vue Router 的安装与配置方法，适合初学者和进阶开发者。

== 介绍 ==
Vue Router 的核心功能是：
* 将 URL 映射到对应的 Vue 组件
* 提供声明式导航（如 `<router-link>`）和编程式导航（如 `router.push()`）
* 支持嵌套路由、动态路由匹配和路由守卫等高级功能

== 安装 ==
=== 通过 npm 或 yarn 安装 ===
在已有 Vue.js 项目中，通过以下命令安装 Vue Router：

<syntaxhighlight lang="bash">
# 使用 npm
npm install vue-router@4

# 使用 yarn
yarn add vue-router@4
</syntaxhighlight>

=== 通过 CDN 引入 ===
对于不使用构建工具的项目，可以通过 CDN 引入：

<syntaxhighlight lang="html">
<script src="https://unpkg.com/vue-router@4"></script>
</syntaxhighlight>

== 基础配置 ==
以下是 Vue Router 的基本配置步骤：

1. 创建路由实例
2. 定义路由配置
3. 将路由挂载到 Vue 应用

=== 完整配置示例 ===
<syntaxhighlight lang="javascript">
// 1. 引入必要依赖
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

// 2. 引入路由组件
import Home from './views/Home.vue'
import About from './views/About.vue'

// 3. 定义路由配置
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

// 4. 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
})

// 5. 创建并挂载根实例
const app = createApp({})
app.use(router)
app.mount('#app')
</syntaxhighlight>

== 路由模式 ==
Vue Router 支持两种历史记录模式：

{| class="wikitable"
|-
! 模式 !! 说明 !! 适用场景
|-
| <code>createWebHistory</code> || 使用 HTML5 History API || 需要干净的 URL 且服务器已配置
|-
| <code>createWebHashHistory</code> || 使用 URL hash || 无需服务器配置，兼容性好
|}

=== 模式选择示例 ===
<syntaxhighlight lang="javascript">
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// HTML5 模式 (推荐)
const router = createRouter({
  history: createWebHistory(),
  routes
})

// Hash 模式
const routerHash = createRouter({
  history: createWebHashHistory(),
  routes
})
</syntaxhighlight>

== 路由视图 ==
路由配置完成后，需要在组件中使用 `<router-view>` 作为路由出口：

<syntaxhighlight lang="html">
<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>
</syntaxhighlight>

== 实际应用案例 ==
=== 电商网站路由配置 ===
假设我们正在构建一个电商网站，需要以下路由：

<mermaid>
graph TD
    A[首页 /] --> B[商品列表 /products]
    B --> C[商品详情 /products/:id]
    A --> D[用户中心 /user]
    D --> E[订单 /user/orders]
    D --> F[地址 /user/addresses]
</mermaid>

对应路由配置：

<syntaxhighlight lang="javascript">
const routes = [
  { path: '/', component: Home },
  { path: '/products', component: ProductList },
  { path: '/products/:id', component: ProductDetail },
  { 
    path: '/user', 
    component: UserCenter,
    children: [
      { path: 'orders', component: UserOrders },
      { path: 'addresses', component: UserAddresses }
    ]
  }
]
</syntaxhighlight>

== 常见问题 ==
=== 路由不生效 ===
可能原因：
1. 未正确调用 <code>app.use(router)</code>
2. 服务器未配置 URL 重定向（HTML5 模式需要）
3. 路由路径拼写错误

=== 动态导入组件 ===
对于大型应用，建议使用路由懒加载：

<syntaxhighlight lang="javascript">
const routes = [
  {
    path: '/about',
    component: () => import('./views/About.vue')
  }
]
</syntaxhighlight>

== 进阶配置 ==
=== 路由守卫 ===
路由守卫允许在导航前后执行逻辑：

<syntaxhighlight lang="javascript">
router.beforeEach((to, from, next) => {
  // 验证用户权限等逻辑
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})
</syntaxhighlight>

=== 滚动行为 ===
自定义页面滚动位置：

<syntaxhighlight lang="javascript">
const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})
</syntaxhighlight>

== 总结 ==
本文介绍了 Vue Router 的完整安装配置流程，包括：
* 通过 npm/yarn 或 CDN 安装
* 基本路由配置方法
* 两种历史记录模式的区别
* 实际应用案例
* 常见问题解决方案
* 进阶配置技巧

正确配置 Vue Router 是构建 Vue 单页面应用的基础，掌握这些知识将为后续学习嵌套路由、动态路由等高级特性打下坚实基础。

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