如何用Vue.js做路由并了解可以做的各种类型路由

简介

当用Vue.js开发Web应用程序时，除非你正在构建一个单页应用程序（SPA），否则你会希望将多个页面连接到一个登陆页面，以允许用户浏览它们。这就是所谓的路由。

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

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

开始学习

Vue.js中的路由是通过Vue Router完成的，它与Vue核心库协同工作，使我们能够建立一个路由系统。在我们的项目中，我们想在两种情况下使用vue-router 。我们要么在现有项目中使用路由器，要么在创建新项目时添加它。

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

将vue-router 集成到一个现有的项目中可能是技术性的，我们现在就来看看这些细节。第一步是使用以下命令安装vue路由器包：

! npm install vue-router@4

一旦安装，导航到src 文件夹，创建一个名为router 的文件夹，然后在router 文件夹中创建一个名为index.js 的文件，这将作为我们的路由器配置文件。我们的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 实例以便在我们的应用程序中使用。

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

import router from './router'

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

这个vue-router 已经在我们的应用程序中进行了全局配置，下一步是在我们的应用程序中使用它。这可以通过在App.js 模板标签中包含<router-view /> 来轻松实现，它只渲染匹配的路由：

<!--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 文件的路由数组中创建，这些路由连接到组件。创建一个视图文件夹是一个很好的做法，所有的页面视图都将存储在这里。比如说：

在这一点上，我们现在知道如何手动设置路由。

注意：如果我们在创建项目时使用vue-cli 来安装vue-router ，所有这些都会为我们完成。

使用Vue CLI安装Vue Router

如果我们要创建一个新的项目，并且相信我们会使用vue-router ，那么在创建项目时就会更容易做到。

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

用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> 标签而不是HTML中的<a> 元素来处理路由。

例如，如果我们想在我们应用程序的顶部创建一个导航栏，我们可以在App.js 文件中，在<router-view/> 标签上面这样做，这样它就会显示在所有路由上：

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

路由链接接受to='path' 属性，该属性将用户带到配置路由时设置的组件的路径。这与HTML中的href='path``' 属性的工作原理相同。

使用命名的路由

使用命名的路由允许我们传入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 ，假设我们有一个水果数组，我们将其循环到我们的应用程序中，我们可以通过这种方式将每个水果与params旁边的链接包裹起来。

<!-- 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 或利用props。

使用*$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

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

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

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

<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路由，这很容易处理，但这次我们将使用一个正则表达式来捕捉所有之前没有声明的路由：

{
   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路由器在我们通过网络应用的路线时跟踪我们的路由器历史。

这允许我们根据一个条件，如点击按钮，来遍历浏览器的历史：

<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 。

推进

push() 通常在一个动作发生后使用，并在历史栈中添加一个新的条目。例如，如果一个用户成功登录，我们希望以编程方式导航到仪表板页面。这可以通过在路由的名称旁边加入推送方法来实现。

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

注意：我们必须确保该路由在我们的路由器配置文件中被声明，否则它将无法工作，并将我们重定向到404页面。

总结

路由是Vue的核心功能之一。除非你正在构建一个单页面应用程序（SPA），否则你会希望将多个页面连接到一个登陆页面，以允许用户浏览它们。

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