Vue Router 安装与使用

# 1. 初识 Vue Router

Vue Router 是 Vue.js 的官方路由管理器，专门用于创建单页面应用（SPA）的路由系统。通过 Vue Router，我们可以实现前端页面的路由控制，实现页面之间的切换和跳转，从而为用户提供更流畅的浏览体验。

### 1.1 什么是 Vue Router

Vue Router 是 Vue.js 官方的路由管理器，利用 Vue Router，可以实现前端路由导航、参数传递和路由拦截等功能。

### 1.2 Vue Router 的作用

- 实现前端路由管理，方便创建单页面应用（SPA）
- 实现页面切换和导航
- 支持嵌套路由、动态路由等高级路由功能

### 1.3 Vue Router 的核心概念

- **路由**：定义了 URL 和组件之间的映射关系
- **路由器**：Vue Router 实例，管理路由
- **组件**：通过路由加载到的视图组件
- **导航**：用户在应用中的跳转行为

在接下来的章节中，我们将详细学习 Vue Router 的安装与配置，以及各种路由操作和高级特性的应用方法。

# 2. 安装 Vue Router

在本章节中，我们将介绍如何安装 Vue Router，并进行相应的配置。

### 2.1 使用 npm 安装 Vue Router

使用 npm 来安装 Vue Router 是最常见的方式之一。下面是具体的安装步骤：

1. 打开终端或命令行工具
2. 在项目根目录下执行以下命令安装 Vue Router：

   npm install vue-router

3. 安装成功后，在项目中引入 Vue Router：

   import Vue from 'vue'
   import VueRouter from 'vue-router'

   Vue.use(VueRouter)

4. 配置路由，在项目中创建一个 router 实例：

   import Vue from 'vue'
   import VueRouter from 'vue-router'

   Vue.use(VueRouter)

   const router = new VueRouter({
     routes: [
       // 路由配置
     ]
   })

   export default router

### 2.2 CDN 引入 Vue Router

除了使用 npm 安装外，我们还可以通过 CDN 引入 Vue Router，这种方法适用于一些简单的项目或在线示例。

在 HTML 文件中引入 Vue Router 的 CDN 链接：

<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.js"></script>

### 2.3 配置 Vue Router

在配置 Vue Router 时，我们需要注意以下几点：

- 创建路由实例，并将其注入到 Vue 根实例中
- 配置路由表，定义不同路径对应的组件
- 可以设置一些路由的其他属性，如路由元信息、路由过渡动画等

graph LR
A(创建路由实例) --> B(配置路由表)
B --> C(注入到 Vue 根实例)

通过以上步骤，我们就可以成功安装和配置 Vue Router，为接下来的路由配置做好准备。

# 3. 路由配置
在 Vue Router 中，路由配置是非常重要的一部分，通过路由配置可以定义页面之间的跳转关系和传参方式。下面将介绍路由配置的一些具体内容。

### 3.1 基本路由配置
在基本路由配置中，我们定义了一些简单的路由规则，例如将不同的 URL 映射到对应的组件上。以下是一个基本路由配置的示例：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
];

这里我们定义了三个基本的路由规则，分别对应不同的路径和组件。

### 3.2 嵌套路由配置
嵌套路由配置可以让我们在页面结构上更加灵活，实现组件嵌套显示的效果。下面是一个嵌套路由配置示例：

const routes = [
  { 
    path: '/dashboard', 
    component: D