Vue 路由器入门指南

在本教程中，我们将研究如何使用 Vue Router 在 Vue 应用程序中实现路由。所以我们可以进行动手实践，我们将使用 Vue 和 Vue Router 构建一个简单的 Pokedex 应用程序。

具体来说，我们将介绍以下内容：

• 设置路由器
• 路由参数
• 声明式和程序化导航
• 嵌套路由
• 404 页

每个允许创建单页应用程序的 JavaScript UI 框架都需要一种将用户从一个页面导航到另一个页面的方法。所有这些都需要在客户端通过将当前显示在页面上的视图与地址栏中的 URL 同步来进行管理。在 Vue 世界中，管理此类任务的 [官方库] 是 Vue Router。

与以往一样，本教程的代码可以在GitHub上找到。

先决条件

以下是必需的，以便您可以充分利用本教程：

• HTML、CSS、JavaScript 和 Vue 的基本知识。如果您知道如何使用 Vue 在页面上呈现某些内容，那么您应该能够跟进。对 API 有一点了解也会有所帮助。
• 您的机器上安装了Node.js和Vue CLI 。我们将在本教程中使用 Vue 3，因此请确保更新 Vue CLI。

应用概览

我们将构建一个 Pokedex 应用程序。它将包含三个页面：

• 口袋妖怪列表页面。这是列出所有原始 151 口袋妖怪的默认页面。
• 口袋妖怪页面。这是我们显示基本细节的地方，例如类型和描述。
• 口袋妖怪详细信息页面。这是我们展示进化技能、能力和动作的地方。

设置应用程序

使用 Vue CLI 启动一个新的 Vue 应用程序：

vue create poke-vue-router

从列出的选项中选择 Vue 3：

完成后，在项目文件夹中导航并安装我们需要的库：

cd poke-vue-router
npm install vue-router@4 axios

请注意，我们使用的是 Vue Router 4 而不是 3，这是您使用 Google 搜索时显示的默认结果。它是在next.router.vuejs.org而不是router.vuejs.org。我们正在使用 Axios 向PokeAPI v2发出请求。

此时，最好运行项目以确保默认的 Vue 应用程序正常工作：

npm run serve

访问http://localhost:8080/您的浏览器并检查默认的 Vue 应用程序是否正在运行。它应该显示如下内容：

接下来，您需要添加sass-loader作为开发依赖项。出于本教程的目的，最好只安装我使用的相同版本。这是因为，在撰写本文时，最新版本与 Vue 3 不兼容：

npm install [email protected] --save-dev

node-sass出于与上述相同的原因，您还需要安装。最好坚持使用与我相同的版本：

npm install [email protected] --save

注意：如果以这种方式安装 Sass 对您不起作用，您还可以在使用 CLI 创建 Vue 应用程序时选择手动选择功能。然后，选择CSS Preprocessors并选择Sass/SCSS (with dart-sass)。

创建应用程序

现在我们准备开始构建应用程序。在您继续操作时，请记住根目录是src文件夹。

从更新main.js文件开始。这是我们导入根组件App.vue和router/index.js声明与路由相关的所有内容的文件的地方：

// main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);
app.use(router);
app.mount("#app");

设置路由器

在App.vue文件中，使用router-viewVue Router 提供的组件。这是 Vue Router 使用的最顶层组件，它为用户访问的当前路径呈现相应的组件：

// App.vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

接下来，创建一个新router/index.js文件并添加以下内容。要创建路由器，我们需要从 Vue Router中提取createRouter和。允许我们创建一个新的路由器实例，同时创建一个 HTML5 历史记录，它基本上是History API的包装器。当我们在页面之间导航时，它允许 Vue Router 操作地址栏中的地址：
createWebHistorycreateRoutercreateWebHistory

// router/index.js
import { createRouter, createWebHistory } from "vue-router";

在此之下，导入我们将使用的所有页面：

import PokemonList from "../views/PokemonList.vue";

pathVue Router 需要一个包含, name, 和component作为其属性的对象数组：

• path: 这是你想要匹配的模式。在下面的代码中，我们正在匹配根路径。因此，如果用户尝试访问http://localhost:8000，则匹配此模式。
• name：页面的名称。这是页面的唯一标识符，当您想从其他页面导航到此页面时，您将使用该标识符。