# Vue 路由器：Vue 3 教程

leoyao102806
170 阅读4分钟

粘贴过来的：www.vuemastery.com/blog/vue-ro…

如果您想学习使用 Vue 3 的新 Vue 路由器，那么您来对地方了。在 Vue 3 中使用 Vue Router 的许多事情是相同的，但与 Vue 2 有一些小的不同。在本文中，我的目的是向您介绍 Vue 3 的 Vue Router，同时为你们强调不同之处已经熟悉路由器了。我们将涵盖：

  1. 为什么使用 Vue 路由器
  2. 从头开始
  3. Vue 路由器基础知识
  4. 从 Vue CLI 安装
  5. 命名路线
  6. 动态细分
  7. 处理 404 Not Found
  8. 在哪里继续学习

为什么选择 Vue 路由器？

Vue 在创建单页应用程序方面非常强大：高度交互的网页在您从一个页面切换到另一个页面时不会刷新。如果您的网站有多个页面（或“视图”）并且您正在使用 Vue，这就是您需要 Vue Router 的原因。

从头开始

我将从使用 Vue 3 CLI 创建的基本 Vue 3 应用程序开始构建 Vue 3 路由。随意编码。从命令行我需要最新的 CLI。您可以通过运行：

$ npm install -g @vue/cli
or 
$ yarn global add @vue/cli

然后我们将创建我们的基本 Vue 3 应用程序。

$ vue create my-router-project

这将为我们提供一个屏幕，我们将在其中选择使用“Vue 3 Preview”：

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9eb48117395f4626a59ccafce87b79f9~tplv-k3u1fbpfcp-zoom-1.image

这将创建一个基本的 Vue 3 应用程序，我们可以通过进入目录并运行服务器来确保它工作：

$ cd my-router-project

then

$ npm run serve

然后当我们去时，[http://localhost:8080](http://localhost:8080)我们应该看到我们的服务器正在运行。

Vue 路由器基础知识

要将 Vue Router 安装到我们的基础 Vue 3 项目（如我们上面创建的）或已经使用 Vue 3 的现有项目中，我们将按照以下步骤操作：

  1. 从命令行安装 Vue 3 路由器
$ npm i vue-router@next
  1. 添加路由目录和配置文件

/src/router/index.js

import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

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

export default router;

请注意，我们routes在一个数组中创建了我们的，我们在其中为每条路线指定了一些重要的项目：

  • Path - 可以找到此路由的 URL 路径。
  • 名称- 当我们链接到此路由时使用的可选名称。
  • 组件- 调用此路由时要加载的组件。

在这个数组下面，你会注意到我们创建了路由器本身，使用routes并且我们还传入了createWebHistory。这用于使用 HTML5 历史 API 从使用切换hash到history mode浏览器内部。我们配置它的方式与我们在 Vue 2 中所做的有点不同。

请注意，我们在底部导出它，因为我们需要在 main.js 文件中导入它。

3. 导入我们的路由 & 使用 Vue Router

接下来我们需要编辑我们的main.js文件以在我们的应用程序中使用我们的路由器。

/src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // <---

createApp(App).use(router).mount('#app')

在这里，我们正在导入我们的路由器文件，然后use在创建我们的应用程序时使用路由器。我们在这个文件中创建应用程序的方式在 Vue 3 中发生了变化。

4. 使用<router-view>和<router-link>

我们的 Vue 应用程序给了我们两个指令来在我们的模板中使用：

<router-view />- 在浏览器中导航到路由时，这是渲染组件的位置。例如，在我们的代码中，/将呈现我们列出的 Home 组件<router-view />。

<router-link>- 这是我们用来在不同组件页面之间创建链接的指令，而不是使用<a href>. 见下文。

这两者都可以在 App.vue 中的简单示例中使用，如下所示：（仅供参考，我删除了 App.vue 中已经存在的内容）。

/src/App.vue

<template>
  <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template

我们需要创建上面提到的 Home 和 About 组件。/components/我将创建一个新目录，而不是将它们放在我们的目录中/views。对于我们的示例，它们将非常简单：

/src/views/Home.vue

<template>
  <h1>Home Page</h1>
</template>

/src/views/About.vue

<template>
  <h1>About Page</h1>
</template>

现在，如果我们启动我们的服务器并前往[http://localhost:8080](http://localhost:8080)我们应该看到以下内容：

从 CLI 安装

您实际上可以通过 CLI 让 Vue 3 为您完成上述大部分配置和设置，但是知道如何自己完成它是很有价值的。如果你创建一个新的 Vue 项目：

$ vue create my-router-project

然后选择“手动选择功能”

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ea48930fad24ad7977d27f0c78083a6~tplv-k3u1fbpfcp-zoom-1.image

您可以选择 Vue 路由器：

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8dfab75bd0984c5fa3bdac213fb5e60f~tplv-k3u1fbpfcp-zoom-1.image

将安装最新版本的 Vue Router，它会预先生成我们上面创建的大部分相同配置。

命名路线

在我们的路由器中，我们在路由中指定了可选名称： Home和About. 如果我们想使用路由名称而不是路径，我们可以这样写我们router-link的 s：

/src/App.vue

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

现在我们的导航和以前一样工作，但我们没有使用路径。如果我们的 URL 路径在未来发生变化，这将很有用。如果路径发生更改，我们不必更改所有router-links内容，因为它们使用名称进行引用。

动态细分

如果我们想创建一个具有变量的路径 URL，例如“gregg”/user/gregg或event/5“5”可以是任何名称或任何数字，我们需要一个动态段。这就像我们在 Vue 2 中所做的那样。

在路由器中，我们在路由中指定:变量。

/src/router/index.js

{
  path: "/user/:name",  // <-- notice the colon
  name: "User",
  component: User,
},

（如果您跟随，请不要忘记在我们的路线中导入用户视图）

要访问视图本身中的动态段，我们现在可以编写：

/src/views/User.vue

<template>
  <h1>The user is {{ $route.params.name }}</h1>
</template>

果然我们得到：

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/574c234da8a441a4959ba476d6b076ac~tplv-k3u1fbpfcp-zoom-1.image

就像 Vue 2 一样，我可以选择将动态段作为道具传递到我的组件中，但指定props = true.

/src/router/index.js

{
    path: "/user/:name", // <-- notice the colon
    name: "User",
    component: User,
    props: true,
 },

现在在我的组件中，我可以拥有：

/src/views/User.vue

<template>
  <h1>The user is {{ name }}</h1>
</template>
<script>
export default {
  props: ["name"],
};
</script>

请注意，我必须指定我的组件需要一个道具。

我得到相同的结果：

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be2a405c18574c5f8bc554c7b9c79bfa~tplv-k3u1fbpfcp-zoom-1.image

处理 404 Not Found

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/071d7548a5f84999803a7624a119e51f~tplv-k3u1fbpfcp-zoom-1.image

由于我们有一个单页应用程序，您会注意到，如果我们转到任何没有在路由文件中映射路由的 URL，我们会得到一个不完整的页面。它加载了我们的 App.vue，但没有加载任何组件。我们需要告诉我们的路由器当它不匹配任何路由时要做什么，而我们这样做的方式在 Vue 3 中略有不同。

我们需要一个位于路由列表底部的路由，如下所示：

/src/router/index.js

{
  path: "/:catchAll(.*)",
  component: NotFound,
},

（如果您正在编写代码，请不要忘记在文件顶部导入 NotFound 组件。）

注意动态段和正则表达式。 :catchAll是动态段，(.*)是一个正则表达式，它基本上匹配任何东西。因此，如果这一条以上的路由都不匹配，它将使用这条。另外，我导入了一个名为的新组件NotFound，如下所示：

/src/views/NotFound.vue

<template>
  <h1>Oops, it looks like the page you're looking for doesn't exist.</h1>
</template>

现在，当我尝试去时http://localhost:8080/asdf，我得到：

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d343b25a4824c81aadb8e507d3e629b~tplv-k3u1fbpfcp-zoom-1.image

avatar
文章
阅读
粉丝