Vue 路由器指南

介绍

使用 Vue.js 开发 Web 应用程序时，除非您正在构建一个 单页应用程序（SPA），您需要将多个页面连接到一个登录页面，以允许用户在其中导航。 这被称为 路由.

路由是将用户导航到网站上不同页面的过程。 Vue.js 是一个用于创建 Single Page Apps 的 JavaScript 框架，这意味着这个应用程序只从服务器加载到浏览器一次，并且在路由时浏览器不需要重新加载； 相反，它只是请求这些页面并加载它们。

在本指南中，我们将学习如何使用 Vue.js 进行路由，并深入了解可以完成的各种类型的路由以及如何完成它们。

入门

Vue.js 中的路由是通过 Vue路由器，它与核心 Vue 库协同工作，允许我们设置路由系统。 我们想使用 vue-router 在我们项目的两个场景中。 我们要么想在现有项目中使用路由器，要么在创建新项目时添加它。

在现有项目中设置 Vue 路由器

整合 vue-router 进入现有项目可能是技术性的，我们现在将讨论这些细节。 第一步是使用以下命令安装 vue 路由器包：

! npm install vue-router@4

安装后，导航到 src 文件夹并创建一个名为 router，后跟一个名为 index.js ，在 router 文件夹，它将作为我们的路由器配置文件。 我们的 src 目录现在看起来像这样：

在 index.js 文件，让我们确保我们粘贴下面的代码，这是路由器配置代码：

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

我们有一个 routes 包含单个对象的数组，该对象可以是多个对象，其中每个对象代表一条路线。 目前，我们只创建了一个会重定向到主页组件的组件。

每一种 routes 对象通常由 path，这是相对于站点根目录的 url 路径， name，它用作标识符，并且 component，我们在页面顶部导入。

除了路由数组，我们在底部通过创建一个 createRouter() 功能并传入 history 关键值和 routes 数组，然后我们导出 router 在我们的应用程序中使用的实例。

要在我们的应用程序中使用此路由器配置，请打开 main.js 文件中 src 夹， import router from "./router"，然后添加 .use(router) 之间 createApp(App) 和 .mount('#app') 如下所示：

import router from './router' createApp(App).use(router).mount('#app')

本篇 vue-router 已经在我们的应用程序中进行了全局配置，下一步就是在我们的应用程序中使用它。 这很容易通过包括 <router-view /> 字幕可视电话用于 App.js 模板标签，它只呈现匹配的路由：

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

在 Vue.js 中设置路由

路由通常在 router/index.js 文件的 routes 数组，这些路由连接到组件。 最好创建一个将存储所有页面视图的视图文件夹。 例如：

至此，我们现在知道如何手动设置路由。

使用 Vue CLI 安装 Vue 路由器

如果我们要创建一个新项目并相信我们会利用 vue-router，在创建项目时这样做更容易。

我们所要做的就是使用 Vue CLI 安装最新版本的 vue-router 在创建项目的过程中手动选择功能时：

通过我们的阅读并了解有关创建 Vue.js 项目的更多信息 Vue CLI 指南!

使用 Vue Router 延迟加载路由

随着我们的应用程序大小的增加，捆绑包的大小也会增加，导致我们的网站需要更长的时间来加载。 我们可以用 vue-router 实现延迟加载以避免加载某些特定路由，直到用户明确请求它们。

这通常在路由器配置文件中通过删除 import 顶部的声明，并将其替换为我们路由的组件选项中的动态导入声明：

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

在路线之间导航

到目前为止，我们已经能够创建路线，但是我们如何在应用程序中导航呢？ 我们使用 <router-link> 标签而不是 <a> HTML 中用于处理路由的元素。

例如，如果我们想在应用程序的顶部创建一个导航栏，我们可以在 App.js 上面的文件 <router-view/> 标记，因此它显示在所有路线上：

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

路由器链接接受 to='path' 将用户带到配置路由时设置的组件路径的属性。 这就像 href='path``' HTML 中的属性。

使用命名路由

使用命名路由允许我们传入 name 有权访问的密钥 name 我们在配置路由时设置的属性，而不是通过以这种方式绑定数据来使用路径：

<router-link :to="{ name: 'About' }">About</router-link>

使用此方法的一个优点是，如果我们决定更改大型应用程序的路由路径，我们不需要开始更改所有链接路径，这可能会很麻烦。

动态路由

可能会出现需要使用动态路由以避免不必要的页面重复的情况。 例如，假设我们有一个水果列表，并且我们希望用户能够点击一个特定的水果，并且只有关于该水果的详细信息才会显示在水果详细信息页面上。 在这种情况下，我们使用动态路由。

我们有两个页面——一个在列表中展示水果，另一个显示每个水果的详细信息，这是一个“蓝图”页面，用于填充水果的详细信息。 我们将在 Vue 文件夹中创建页面，然后将路由添加到 routes 数组：

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

我们会注意到，对于 FruitDetails 页面，我们添加了动态 id 财产，所以它得到 id 参数并使用它来查询显示在该页面上的特定数据 $route.params 在我们的模板中，从而使路线动态化。

在 FruitsPage，假设我们有一个水果数组，我们循环到我们的应用程序中，我们可以用这样的方式在参数旁边用一个链接包装每个水果：

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

此时，当用户点击每个水果时，它会将它们带到 FruitDetails 我们可以访问的页面 id 参数并使用它来确定哪些水果的详细信息应显示在 FruitDetails 页面上发布服务提醒。

访问路由参数

到目前为止，我们已经了解了如何将参数动态传递给特定页面，现在让我们看看如何在我们的 FruitDetails 页。 我们可以通过两种方式访问​​ Vue 中的参数——通过 $route.params 或使用道具：

运用 $route.params

参数可通过以下方式直接访问 $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

或者我们可以在我们的 data() 使用方法 this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

使用 Vue 道具

通过路由动态访问数据的另一种简单方法是使用道具。 我们首先要设置 props 至 true 在路由配置对象中：

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

这样，我们接下来要做的就是添加 props 选项 script 标记，然后利用我们的道具 template 标签：

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

404 错误 - 找不到路由

如果用户导航到不存在的路由，Vue 将加载页面但没有任何组件，从而产生一个空页面。 在这种情况下，最好的做法是显示一个 404 页面，并可能带有一个按钮，将他们引导至主页或我们认为他们想去的任何地方。

这很容易通过为我们的 404 页面创建一个组件，然后将 404 路由添加到我们的路由器配置文件的 routes 数组中来处理，但是这次我们将使用正则表达式来捕获之前未声明的所有路由：

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

:catchAll 是接收正则表达式的动态段 (.*) Vue Router 用来检查用户导航到的路由是否在我们的路由器配置文件中定义。 如果这样的路由不存在，用户将被定向到组件，在我们的例子中是 ErrorPage 零件：

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

重定向

在我们希望用户在访问特定路由时被重定向的情况下，例如，如果我们有一条不再使用的旧路由，我们希望用户在访问该路由时被重定向到新路由。 这很容易通过向我们的路由配置数组中添加一个新对象来完成，带有 redirect 领域：

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

上面的代码所做的就是如果用户访问，路径 /all-fruits，它会将它们重定向到 /fruits 路线。

程序化导航

到目前为止，我们已经了解了很多关于路由的知识，但是您还想知道一件事：如何执行程序化导航。 我们将程序化导航定义为一种情况，在这种情况下，用户被重定向/定向基于路径上发生的特定操作，例如登录或注册操作，或者通过单击特定按钮，例如“返回”按钮。

路由器历史

我们可以使用浏览器历史记录轻松地向后或向前导航，具体取决于我们的偏好。 如果你还记得，我们有一个 createRouter() 我们在路由器配置文件中设置了一个函数 history 值，允许 Vue 路由器在我们通过 Web 应用程序路由时跟踪我们的路由器历史记录。

这允许我们基于诸如按钮单击之类的条件遍历浏览器的历史记录：

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

我们也可以通过使用 1 而不是 -1 假设我们想要移动 2 步，我们可以使用 2 or -2.

推

push() 通常在动作发生后使用，并将新条目添加到历史堆栈。 例如，如果用户成功登录，我们希望以编程方式导航到仪表板页面。 这是通过在路由名称旁边包含 push 方法来完成的：

this.$router.push({ name: 'Dashboard' });

结论

路由是 Vue 的核心功能之一。 除非你正在建立一个 单页应用程序（SPA），您需要将多个页面连接到一个登录页面，以允许用户在其中导航。

在本指南中，我们了解了什么是路由，如何安装 vue-router 在新项目和现有项目中，如何执行延迟加载、在路由之间导航、执行动态路由、访问路由参数和执行编程导航。

• 硬币聪明。 欧洲最好的比特币和加密货币交易所。
• 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 自由登入。
• 加密鹰。 山寨币雷达。 免费试用。
• 来源：https://stackabuse.com/guide-to-vue-router/