Vue 路由
Vue 中的路由用于导航 Vue 应用程序，它在客户端（浏览器中）发生，无需完全重新加载页面，从而提供更快的用户体验。
路由是一种导航方式，类似于我们之前使用动态组件的方式。
通过路由，我们可以使用 URL 地址将用户引导到 Vue 应用程序中的特定位置。
使用动态组件导航
要理解 Vue 中的路由，我们首先来看一个使用动态组件在两个组件之间切换的应用程序。
我们可以使用按钮在组件之间切换
示例
FoodItems.vue:
<template>
<h1>Food!</h1>
<p>I like most types of food.</p>
</template>
AnimalCollection.vue:
<template>
<h1>Animals!</h1>
<p>I want to learn about at least one new animal every year.</p>
</template>
App.vue:
<template>
<p>Choose what part of this page you want to see:</p>
<button @click="activeComp = 'animal-collection'">Animals</button>
<button @click="activeComp = 'food-items'">Food</button><br>
<div>
<component :is="activeComp"></component>
</div>
</template>
<script>
export default {
data() {
return {
activeComp: ''
}
}
}
</script>
<style scoped>
button {
padding: 5px;
margin: 10px;
}
div {
border: dashed black 1px;
padding: 20px;
margin: 10px;
display: inline-block;
}
</style>
从动态组件到路由
我们使用 Vue 构建 SPA（单页应用程序），这意味着我们的应用程序只包含一个 *.html 文件。这意味着我们不能将用户引导到其他 *.html 文件来向他们展示页面上的不同内容。
在上面的示例中，我们可以在页面上的不同内容之间导航，但我们无法向其他人提供页面的地址，以便他们直接访问有关食物的部分，但通过路由我们可以做到这一点。
如果适当设置了路由，当您在 URL 地址后添加扩展名（例如“/food-items”）打开 Vue 应用程序时，您将直接进入包含食物内容的部分。
安装 Vue 路由库
要在您的机器上使用 Vue 路由，请使用终端在您的项目文件夹中安装 Vue 路由库
npm install vue-router@4
更新 main.js
要使用路由，我们必须创建一个路由器，我们在 main.js 文件中完成此操作。
main.js:
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import FoodItems from './components/FoodItems.vue'
import AnimalCollection from './components/AnimalCollection.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/animals', component: AnimalCollection },
{ path: '/food', component: FoodItems },
]
});
const app = createApp(App)
app.use(router);
app.component('food-items', FoodItems);
app.component('animal-collection', AnimalCollection);
app.mount('#app')
第 2、8-14 和 18 行已添加，以添加路由器功能。
第 19-20 行已删除，因为组件已通过第 11-12 行的路由器包含在内。
我们现在已经创建了一个路由器，例如，如果将“/animals”添加到原始 URL 地址的末尾，它将打开“AnimalCollection”组件，但直到下一节我们添加 <router-view> 组件时，它才能工作。路由器还会跟踪网页历史记录，以便您可以使用通常位于网页浏览器左上角 URL 旁边的箭头在历史记录中前后移动。
使用 <router-view> 组件
要使用新路由器更改页面上的内容，我们需要删除上一个示例中的动态组件，并改用 <router-view> 组件。
App.vue:
<template>
<p>Choose what part of this page you want to see:</p>
<button @click="activeComp = 'animal-collection'">Animals</button>
<button @click="activeComp = 'food-items'">Food</button><br>
<div>
<router-view></router-view>
<component :is="activeComp"></component>
</div>
</template>
如果您已在计算机上完成上述更改，则可以在浏览器中项目的 URL 地址中添加“/food”，页面应更新以显示食物内容，如下所示
使用 <router-link> 组件
我们可以用 <router-link> 组件替换按钮，因为它与路由器配合得更好。
我们不再需要“activeComp”数据属性，因此可以删除它，实际上我们甚至可以删除整个 <script> 标签，因为它是空的。
App.vue:
<template>
<p>Choose what part of this page you want to see:</p>
<router-link to="/animals">Animals</router-link>
<router-link to="/food">Food</router-link><br>
<div>
<router-view></router-view>
</div>
</template>
<script></script>
为 <router-link> 组件设置样式
<router-link> 组件渲染为 <a> 标签。如果我们在浏览器中右键单击元素并检查它，我们可以看到这一点
正如您在上面的截图中看到的，Vue 还会跟踪哪个组件是活动组件，并为活动的 <router-link> 组件（现在渲染为 <a> 标签）提供“router-link-active”类。
我们可以使用上面的信息来设置样式，以突出显示哪个 <router-link> 组件是活动的
示例
App.vue:
<template>
<p>Choose what part of this page you want to see:</p>
<router-link to="/animals">Animals</router-link>
<router-link to="/food">Food</router-link><br>
<div>
<router-view></router-view>
</div>
</template>
<style scoped>
a {
display: inline-block;
background-color: black;
border: solid 1px black;
color: white;
padding: 5px;
margin: 10px;
}
a:hover,
a.router-link-active {
background-color: rgb(110, 79, 13);
}
div {
border: dashed black 1px;
padding: 20px;
margin: 10px;
display: inline-block;
}
</style>
注意：在上面的示例中，URL 地址未更新，但如果您在自己的机器上执行此操作，URL 地址将会更新。即使 URL 地址未更新，上面的示例也有效，因为路由由 Vue 中的路由器在内部处理。
