什么是路由？

提到路由（Route），一般我们会联想到网络中常见的路由器（Router），那么路由和路由器之间有什么关联呢？路由是指路由器从一个接口接收到数据，根据数据的目的地址将数据定向传送到另一个接口的行为和动作；而路由器是执行行为和动作的硬件设备，主要用于连接网络，实现不同网络之间的通信和数据传递。

根据技术的不同，Web开发中的路由分为后端路由和前端路由。 

1. 后端路由

后端路由的整个过程发生在服务器端，开发者需要在服务器端程序中建立一套后端路由规则。当服务器接收到请求后，会通过路由寻找当前请求的URL地址对应的处理程序。

后端路由规则和处理程序都是开发人员事先编写的代码。当服务器接收到浏览器的请求后，会通过app.get()方法根据URL地址中的路径寻找对应的处理程序。

下面以Node.js环境中的Express框架中的路由为例，演示后端路由的工作原理如下图所示。

2. 前端路由

前端路由的整个过程发生在浏览器端，其特点是当URL地址改变时不需要向服务器发起一个加载新页面的请求，而是在维持当前页面的情况下切换页面中显示的内容。

下面以Vue中的路由为例，演示前端路由的工作原理。

Vue中的路由有Hash模式和HTML5模式，具体介绍如下。

① Hash模式

Hash模式的前端路由通过URL中从“#”开始的部分实现不同组件之间的切换，“#”表示Hash符，“#”后面的值称为Hash值，该值将用于进行路由匹配。Hash模式前端路由的工作原理如下图所示。

② HTML5模式

HTML5模式的URL地址与后端路由的URL地址的风格一致，可以通过URL地址中的路径进行路由匹配。HTML5模式前端路由的工作原理如下图所示。

1 Vue Router的安装

Vue Router有多个版本，那么Vue 3适用于Vue Router哪个版本？

Vue Router有多个版本，其中，Vue Router 4适用于Vue 3，而Vue Router 3适用于Vue 2。

由于本书重点讲解Vue 3，所以接下来将基于Vue Router4进行讲解。

yarn add vue-router@4 --save

@4： 表示安装vue-router的版本号为4，即Vue Router 4

--save： 表示项目运行时依赖

安装完成后，打开package.json文件，查看Vue Router的版本号。

"dependencies": {
  "vue": "^3.2.45",
  "vue-router": "4"
},

2. Vue Router的基本使用

路由的基本使用步骤分为以下4步。

（1）定义路由组件

在src\components目录下创建Home.vue文件和About.vue文件。

<!-- Home.vue文件 -->

<template>
  <div class="home-container">
    <h3>Home组件</h3>
  </div>
</template>
<style scoped>
.home-container {
  min-height: 150px;
  background-color: #f2f2f2;
  padding: 15px;
}
</style>

<!-- About.vue文件 -->

<template>
  <div class="about-container">
    <h3>About组件</h3>
  </div>
</template>
<style scoped>
.about-container {
  min-height: 150px;
  background-color: #f2f2f2;
  padding: 15px;
}
</style>

（2）定义路由链接和路由视图

使用<router-view>标签定义路由视图，该标签会被渲染成当前路由对应的组件。通过<router-link>标签定义路由链接方便在不同组件之间切换。

<template>
  <div class="app-container">
    <h1>App根组件</h1>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>
<style scoped>
.app-container {
  text-align: center;
  font-size: 16px;
}
.app-container a {
  padding: 10px;
  color: #000;
}
.app-container a.router-link-active {
  color: #fff;
  background-color: #000;
}
</style>

（3）创建路由模块

① 在src目录下创建router.js文件作为路由模块，并在该文件中导入路由相关函数。

import { createRouter, createWebHashHistory } from 'vue-router'

② 在router.js文件中导入需要被路由控制的Home组件和About组件。

import Home from './components/Home.vue'
import About from './components/About.vue'

③ 在router.js文件中创建路由实例对象。

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

注意：

步骤②和③的组件加载方式是一次加载所有组件，除了这种方式外，还可以通过懒加载的方式动态加载组件。

④ 在router.js文件中导出路由实例对象。

export default router

通过懒加载的方式动态加载组件

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/home', component: () => import('./components/Home.vue') },
    { path: '/about', component: () => import('./components/About.vue') },
  ]
})

（4）导入并挂载路由模块

在src\main.js文件中导入并挂载路由模块。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router.js'	// 导入路由模块
const app = createApp(App)
app.use(router)		// 挂载路由模块
app.mount('#app')

执行yarn dev命令启动服务。服务启动成功后，在浏览器中访问http://127.0.0.1:5173/，使用路由后的初始页面效果、单击“首页”路由链接后的Home组件的效果、单击“关于”路由链接后的About组件的效果如下图所示。

多学一招：更改路由链接激活项的类名

在默认情况下，路由链接激活项的类名为router-link-active。

如果需要更改类名，可以在创建路由实例对象时通过linkActiveClass属性设置一个类名。

const router = createRouter({
  linkActiveClass: 'router-active',
  ……
})

请以提供的素材（app02.rar）为基础，使用路由，实现当点击侧边栏的某个导航时，视图区域对应显示出相关的组件内容