Vue 路由

从动态组件到路由

我们使用 Vue 构建 SPA（单页应用程序），这意味着我们的应用程序仅包含一个 *.html 文件。这意味着我们无法引导人们访问其他 *.html 文件来向他们显示我们页面上的不同内容。

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

正确设置路由后，如果您使用 URL 地址的扩展名（例如"/food-items"）打开 Vue 应用程序，您将直接进入包含食物内容的部分。

安装 Vue Router 库

要在您的计算机上使用 Vue 中的路由，请使用终端在项目文件夹中安装 Vue Router 库:

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>选择您想查看此页面的哪个部分:</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>选择您想查看此页面的哪个部分:</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>选择您想查看此页面的哪个部分:</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 中的路由器在内部处理的。