Vue Router的基本用法与实践

# 2.1 路由的基本概念

### 2.1.1 路由的组成

一个路由由以下部分组成：

- **路径（Path）：** 浏览器地址栏中显示的 URL 路径，用于匹配特定的页面。
- **组件（Component）：** 与路径关联的 Vue 组件，用于渲染页面内容。
- **名称（Name）：** 可选的名称，用于通过名称引用路由。

### 2.1.2 路由的匹配规则

Vue Router 使用以下规则匹配路由：

- **完全匹配：** 路径与浏览器地址栏中的 URL 完全匹配。
- **动态匹配：** 路径包含动态段，表示可以匹配任何值。
- **重定向：** 路由可以重定向到另一个路由，从而改变浏览器地址栏中的 URL。

# 2. Vue Router基础

### 2.1 路由的基本概念

#### 2.1.1 路由的组成

路由是Vue Router中最重要的概念，它代表了应用程序中的一个特定视图或状态。每个路由由以下部分组成：

- **路径（path）：** 路由的URL，用于匹配浏览器中的地址栏。
- **组件（component）：** 路由关联的Vue组件，用于渲染视图。
- **名称（name）：** 可选的唯一标识符，用于在代码中引用路由。

#### 2.1.2 路由的匹配规则

Vue Router使用以下规则匹配路由：

- **精确匹配：** 路径与浏览器地址栏中的URL完全匹配。
- **动态匹配：** 路径包含以冒号（:）开头的动态段，用于匹配URL中的特定值。
- **通配符匹配：** 路径包含以星号（*）开头的通配符段，用于匹配URL中任何剩余的部分。

### 2.2 路由组件的创建和使用

#### 2.2.1 路由组件的定义

路由组件是Vue组件，用于渲染路由关联的视图。它们通常使用`<router-view>`组件来显示。路由组件可以定义在单独的文件中，也可以内联定义在路由配置中。

// 单独文件组件
export default {
  template: `<div>...</div>`
};

// 内联组件
const MyComponent = {
  template: `<div>...</div>`
};

#### 2.2.2 路由组件的渲染

`<router-view>`组件用于渲染当前激活的路由组件。它是一个占位符，根据当前URL匹配的路由，动态渲染相应的组件。

<template>
  <router-view></router-view>
</template>

### 代码示例

以下代码示例展示了如何创建和使用路由组件：

// 路由配置
const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
];

// 主应用程序
const app = new Vue({
  router: new VueRouter({ routes })
});

<!-- 模板 -->
<template>
  <div>
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

### 流程图

![Vue Router路由匹配流程图](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVEFURVJcblxuICAgIFBhdGggLS0-IE1hdGNoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA