Vue Router的初学者指南

热门技术勘探工
144 阅读7分钟

A Beginner's Guide to Vue Router

在本教程中，我们将研究如何使用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个小精灵。

    Pokemon List

  • 口袋妖怪页面。这是我们显示基本细节的地方，如类型和描述。

    Pokemon Page

  • 小精灵详情页。这是我们显示进化链、能力和动作的地方。

    Pokemon details

设置应用程序

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

vue create poke-vue-router

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

Vue CLI options

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

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应用是否正在运行。它应该显示类似这样的东西。

default vue app

接下来，你需要添加sass-loader 作为开发依赖项。为了本教程的目的，最好只安装我使用的那个版本。这是因为，在写这篇文章的时候，最新的版本与Vue 3不兼容。

npm install sass-loader@10.1.1 --save-dev

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

npm install node-sass@4.14.1 --save

注意：如果这样安装Sass对你不起作用，你也可以在用CLI创建Vue应用时选择手动选择功能。然后，选择CSS预处理器并选择Sass/SCSS（用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 文件中，使用Vue Router提供的router-view 组件。这是Vue Router使用的最顶层的组件，为用户访问的当前路径渲染相应的组件。

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

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

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

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

在这下面，导入所有我们要使用的页面。

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

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

  • path：这是你想要匹配的模式。在下面的代码中，我们要匹配的是根路径。因此，如果用户试图访问http://localhost:8000 ，这个模式将被匹配。
  • name: 页面的名称。这是该页面的唯一标识符，当你想从其他页面导航到该页面时，就会使用这个标识符。
  • component：当path 与用户访问的URL相匹配时，你想呈现的组件。
const routes = [
  {
    path: "/",
    name: "PokemonList",
    component: PokemonList,
  },
];

最后，通过提供一个包含history 和routes 到createRouter 的对象来创建路由器实例。

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

这就是我们现在需要的一切。你可能想知道其他页面在哪里。我们将在以后的工作中添加它们。现在，让我们先在默认页面上工作。

创建一个页面

创建一个页面并不真的需要任何特殊的代码。因此，如果你知道如何在Vue中创建一个自定义组件，你应该能够创建一个页面供Vue Router使用。

创建一个views/PokemonList.vue 文件并添加下面的代码。在这个文件中，我们正在使用一个自定义的List 组件来渲染口袋妖怪列表。我们真正需要做的是提供数据给List 组件使用。一旦组件安装完毕，我们就向PokeAPI提出请求。我们不希望列表变得太大，所以我们将结果限制在最初的151个小精灵。一旦我们得到了结果，我们只需将其分配给组件的items 数据。这将反过来更新List 组件。

<template>
  <List :items="items" />
</template>

<script>
import axios from "axios";
import List from "../components/List.vue";

export default {
  name: "PokemonList",
  data() {
    return {
      items: null,
    };
  },
  mounted() {
    axios.get(`https://pokeapi.co/api/v2/pokemon?limit=151`).then((res) => {
      if (res.data && res.data.results) {
        this.items = res.data.results;
      }
    });
  },
  components: {
    List,
  },
};
</script>

下面是List 组件的代码。组件存储在components 目录中，所以创建一个components/List.vue 文件并添加以下内容。

<template>
  <div v-if="items">
    <router-link
      :to="{ name: 'Pokemon', params: { name: row.name } }"
      class="link"
      v-for="row in items"
      :key="row.name"
    >
      <div class="list-item">
        {{ row.name }}
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "List",
  props: {
    items: {
      type: Array,
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/list.scss";
</style>

你可以在GitHub repo中查看styles/list.scss 文件的代码。

在这一点上，你现在可以在浏览器中查看这些变化。只是你会得到以下错误。

Vue error

这是因为Vue正试图生成Pokemon页面的链接，但还没有。Vue CLI很聪明，会警告你这一点。你可以通过使用<div> 来代替components/List.vue 文件的模板来暂时解决这个问题。

<template>
  <div v-if="items">
    <div v-for="row in items" :key="row.name">{{ row.name }}</div>
  </div>
</template>

有了这个，你应该可以看到小精灵的列表。记住，一旦我们添加了小精灵页面，就把它改回来。

声明式导航

使用Vue Router，你可以通过两种方式进行导航：声明式和编程式。声明式导航与我们在HTML中使用锚标签的方式基本相同。你只需声明你想让链接导航到哪里。另一方面，编程式导航是通过显式调用Vue Router来完成的，当用户的动作被执行时（比如一个按钮被点击），就会导航到一个特定的页面。

让我们快速分解一下这是如何工作的。为了导航，你需要使用router-link 组件。这需要的唯一属性是:to 。这是一个包含你要导航的页面name 的对象，以及一个可选的params 对象，用于指定你要传递给页面的参数。在这种情况下，我们要传入小精灵的名字。

<router-link
  :to="{ name: 'Pokemon', params: { name: row.name } }"
  class="link"
  v-for="row in items"
  :key="row.name"
>
  <div class="list-item">
    {{ row.name }}
  </div>
</router-link>

为了直观地了解这一工作原理，你需要知道Pokemon 屏幕所使用的模式。下面是它的样子。/pokemon/:name.:name 代表你传入的参数name 。例如，如果用户想查看皮卡丘，URL看起来就像http://localhost:8000/pokemon/pikachu 。我们很快就会回到这个问题上，进行更详细的讨论。

继续阅读《Vue Router初学者指南》，请点击SitePoint。

avatar
文章
阅读
粉丝