Vue3 秘籍（四）

原文：zh.annas-archive.org/md5/915E62C558C25E5846A894A1C2157B6C

译者：飞龙

协议：CC BY-NC-SA 4.0

第六章：使用 vue-router 管理路由

您的应用程序的主要部分之一是路由管理。在这里，可以将无限的组件组合在一个地方。

路由能够协调组件的渲染，并根据 URL 指示应用程序应该在哪里。有许多方法可以增加vue-router的定制化。您可以添加路由守卫来检查特定路由是否可由访问级别导航，或在进入路由之前获取数据以管理应用程序中的错误。

在本章中，您将学习如何创建应用程序路由、动态路由、别名和信任路由，以及嵌套路由视图。我们还将看看如何管理错误，创建路由守卫，并延迟加载您的页面。

在本章中，我们将涵盖以下教程：

• 创建一个简单的路由

• 创建一个程序化导航

• 创建一个动态路由路径

• 创建一个路由别名

• 创建一个路由重定向

• 创建一个嵌套路由视图

• 创建一个 404 错误页面

• 创建一个身份验证中间件

• 异步延迟加载您的页面

技术要求

在本章中，我们将使用Node.js和Vue-CLI。

注意 Windows 用户：您需要安装一个名为windows-build-tools的 npm 包，以便能够安装以下所需的包。为此，请以管理员身份打开 PowerShell 并执行以下命令：

> npm install -g windows-build-tools

要安装 Vue-CLI，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> npm install -g @vue/cli @vue/cli-service-global

创建一个简单的路由

在您的应用程序中，您可以创建无限组合的路由，可以导向任意数量的页面和组件。

vue-router是这个组合的维护者。我们需要使用它来设置如何创建路径并为我们的访问者建立路由的指令。

在这个教程中，我们将学习如何创建一个初始路由，该路由将引导到不同的组件。

准备工作

这个教程的先决条件如下：

• Node.js 12+

所需的 Node.js 全局对象如下：

• @vue/cli

• @vue/cli-service-global

如何做…

创建一个 Vue-CLI 项目，按照以下步骤进行：

1. 我们需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> vue create initial-routes

1. CLI 将询问一些问题，这些问题将有助于创建项目。您可以使用箭头键导航，Enter键继续，Spacebar选择选项。

2. 有两种方法可以启动新项目。默认方法是基本的 Babel 和 ESLint 项目，没有任何插件或配置，还有手动模式，您可以选择更多模式、插件、代码检查器和选项。我们将选择手动：

?  Please pick a preset: (Use arrow keys) default (babel, eslint**)** ❯ **Manually select features** ‌

1. 现在我们被问及项目中想要的功能。这些功能包括一些 Vue 插件，如 Vuex 或 Vue Router（Vue-Router）、测试器、代码检查器等。选择Babel、Router和Linter / Formatter：

?  Check the features needed for your project: (Use arrow keys) ❯ Babel
 TypeScript Progressive Web App (PWA) Support ❯ Router
 Vuex  CSS Pre-processors ❯ Linter / Formatter
 Unit Testing E2E Testing

1. 现在 Vue-CLI 会询问您是否要在路由管理中使用历史模式。我们会选择Y（是）：

?  Use history mode for router? (Requires proper server setup for
  index fallback in production)  (Y**/n) y**

1. 继续此过程，选择一个代码检查器和格式化程序。在我们的情况下，我们将选择ESLint + Airbnb config：

?  Pick a linter / formatter config: (Use arrow keys) ESLint with error prevention only ❯ **ESLint + Airbnb config** ESLint + Standard config 
  ESLint + Prettier

1. 设置完代码检查规则后，我们需要定义它们何时应用于您的代码。它们可以在保存时应用，也可以在提交时修复：

?  Pick additional lint features: (Use arrow keys)  Lint on save ❯ Lint and fix on commit

1. 在定义了所有这些插件、代码检查器和处理器之后，我们需要选择设置和配置存储的位置。最佳存储位置是专用文件，但也可以将它们存储在package.json中：

?  Where do you prefer placing config for Babel, ESLint, etc.?  (Use arrow keys) ❯ **In dedicated config files****In package.json** 

1. 现在您可以选择是否要将此选择作为将来项目的预设，这样您就不需要再次重新选择所有内容：

?  Save this as a preset for future projects?  (y/N) n

我们的步骤将分为五个部分：

• 创建NavigationBar组件

• 创建联系页面

• 创建关于页面

• 更改应用程序的主要组件

• 创建路由

让我们开始吧。

创建 NavigationBar 组件

现在我们将创建将在我们的应用程序中使用的NavigationBar组件。

单文件组件

在这一部分，我们将创建单文件组件的

1. 在src/components文件夹中创建一个navigationBar.vue文件并打开它。

2. 创建组件的默认export对象，具有 Vue 属性name：

<script> export default {
  name: 'NavigationBar', }; </script>

单文件组件