Vue 路由器初学者指南

2022-06-07 IT知识路由器学者

博观而约取，厚积而薄发。这篇文章主要讲述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 口袋妖怪的默认页面。

文章图片
< h1> pokemon.name < /h1>
< div class="types">
< div
class="type-box"
v-for="row in pokemon.types"
:key="row.slot"
v-bind:class="row.type.name.toLowerCase()"
>
row.type.name
< /div>
< /div>

< div class="description">
pokemon.description
< /div>

< a @click="moreDetails" class="link"> More Details< /a>
< /div>
< /template>

< script>
export default
name: "BasicDetails",
props:
pokemon:
type: Object,
,
,

methods:
moreDetails()
this.$router.push(
name: "PokemonDetails",
params:
name: this.pokemon.name,
specie_id: this.pokemon.specie_id,
,
);
,
,
;
< /script>

< style lang="scss" scoped>
@import "../styles/types.scss";
@import "../styles/pokemon.scss";
< /style>
??您可以在GitHub??存储库中查看??styles/types.scss??and??styles/pokemon.scss??文件的代码。
【Vue 路由器初学者指南】此时，您应该能够再次在浏览器中看到更改。您还可以将??components/List.vue??文件更新回其原始代码，??router-link??而不是??< div> ??.
程序化导航
您可能已经注意到我们在??BasicDetails??组件中做了一些不同的事情。我们并没有真正导航到??PokemonDetails??使用??router-link??. 相反，我们使用了一个锚元素并拦截了它的点击事件。这就是??程序化导航??的实现方式。我们可以通过访问路由器??this.$router??。然后我们调用该??push()??方法在历史堆栈顶部推送一个新页面。路由器将显示顶部的任何页面。当用户单击浏览器的后退按钮时，此方法允许导航回上一页，因为单击它只是将当前页面“弹出”到历史堆栈顶部。这个方法接受一个包含??name??和??params??属性的对象，所以它和你传递给??to??中的财产??router-link??：

methods:
moreDetails()
this.$router.push(
name: "PokemonDetails",
params:
name: this.pokemon.name,
specie_id: this.pokemon.specie_id,
,
);
,
,

嵌套路由
接下来，更新路由器文件以包含 Pokemon 详细信息页面的路径。在这里，我们使用嵌套路由来传递多个自定义参数。在这种情况下，我们传入??name??and ??specie_id??：
import Pokemon from "../views/Pokemon";

import PokemonDetails
推荐阅读

上一篇：阿里云扩容云盘后，系统里进行命令操作扩容空间

下一篇：Linux中负载均衡是什么?传输模式分为几种（）