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 构建 SPAs（单页应用程序），这意味着我们的应用程序只包含一个 *.html 文件。这意味着我们不能将人们引导到其他 *.html 文件，以便在我们的页面上向他们显示不同的内容。

在上面的例子中，我们可以在页面上的不同内容之间导航，但我们不能给其他人一个页面地址，让他们直接进入关于食物的部分，但通过路由，我们可以做到这一点。

通过适当设置路由，如果您打开带有 URL 地址扩展名的 Vue 应用程序，例如 "/food-items"，您将直接进入包含食物内容的部分。

安装 Vue 路由库

要在机器上使用 Vue 中的路由，请使用终端在项目文件夹中安装 Vue 路由库：

更新 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 行中。

我们现在已经创建了一个路由，例如，如果在原始 URL 地址的末尾添加了 '/animals'，它可以打开 '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>

如果你在电脑上做了上述更改，你可以在浏览器中将 '/food' 添加到项目页面的URL地址，页面应该更新以显示食物内容，如下所示：

<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> 组件提供 'router-link-active' 类（现在呈现为 <a> 标记）。我们可以使用上面的信息来突出显示哪个 <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>