Vue.js中Vue Router该如何掌握？本篇文章来说清楚

已收录   阅读次数: 752
2021-11-0121:56:11 发表评论
摘要

继续学习Vue.js相关内容，前面的一些基础知识，可以参看下方的前情提要，本篇文章则是来聊一下Vue Router也就是所说的Vue路由，直接点就是Vue导航之意，让我们开始吧……
分享至：
Vue.js中Vue Router该如何掌握？本篇文章来说清楚

开篇寄语

继续学习Vue.js相关内容，前面的一些基础知识，可以参看下方的前情提要，本篇文章则是来聊一下Vue Router也就是所说的Vue路由，直接点就是Vue导航之意，让我们开始吧。

前情提要

内容详情

本篇文章以Vue 3为例，虽然与Vue 2的差别并不是很大。

现代单页 Web 应用程序 (SPA) 最强大的功能之一是路由。现代单页应用程序（例如 Vue 应用程序）可以在客户端（无需请求服务器）从一个页面转换到另一个页面。 Vue Router 是 Vue 应用程序中用于页面导航的官方库。 Vue Router 使用简单，但功能强大。在本文中，我们将深入探讨 Vue Router 4（与 Vue 3 一起使用）。我们将介绍舒适地使用 Vue Router 所需的一切。

包含内容：

  • Vue 路由器基础
  • 动态路由
  • 如何传递路由器参数
  • 延迟加载

Vue 路由器基础

  • 新建一个Cli项目并运行：
# Create a new Vue project
vue create demo
cd demo
# start your app by running the following command
npm run serve

接下来我们可以通过运行以下命令将 Vue Router 添加到我们的项目中。

vue add router

cli 会询问我们是否需要历史模式。在本教程中，我们将使用历史模式，因此我们将选择是，如下图所示：

Vue.js中Vue Router该如何掌握？本篇文章来说清楚

让我们来看一下项目文件，是不是多了一些什么？

Vue.js中Vue Router该如何掌握？本篇文章来说清楚

为我们创建了一个名为 views 的文件夹以及两个文件 About.vue 和 Home.vue。这些文件代表我们的页面。还会生成一个名为 router/index.js 的文件。该文件包含所有路由器配置。让我们打开 router/index.js 文件。内容如下：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

我们从 vue-router 库中导入 createRouter 和 createWebHistory。接下来，我们从 views/Home.vue 导入 Home 组件。在第 3 行，我们声明了一个名为 routes 的对象数组。这个数组代表我们在应用程序中的路由。这些数组项称为路由对象。第一个路由对象有一个路径 / 这意味着这将是我们的基本 URL。 component 属性表示当用户访问此路径时将呈现的组件。

我们将在此路径上呈现主页。

最后，name 属性表示路由的名称。

接着来看一下App.vue：

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

观察路由器链接标签。

Vue 是一个单页应用程序。应用程序的数据已从服务器下载。当我们路由到另一个视图时，应用程序只是隐藏了一些信息并显示了请求的信息。

router-link 标签有一个 to 属性，它指的是要访问的页面。

运行程序，看一下实际效果，如下图所示：

Vue.js中Vue Router该如何掌握？本篇文章来说清楚

如果多添加一个导航，该如何添加呢？

请继续编辑App.vue文件，如下所示，新建了一个Profile的导航：

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

然后再在views文件夹里面新建一个名为Profile.vue的文件，并书写以下代码：

    <template>
      <div class="home">
        Profile Info
      </div>
    </template>

然后，再前往index.js编辑该路由内容，代码如下所示：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Profile from '../views/Profile.vue'

const routes = [{
        path: '/',
        name: 'Home',
        component: Home
    }, {
        path: '/profile',
        name: 'profile',
        component: Profile,
    },
    {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import ( /* webpackChunkName: "about" */ '../views/About.vue')
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

生成效果如下图所示：

Vue.js中Vue Router该如何掌握？本篇文章来说清楚

如何传递路由器参数

首先，让我们来看看路由器参数（简称路由器参数）是什么以及它们为什么重要。假设我们的应用程序中有一个页面，我们向用户显示所有可用博客文章的列表。

假设在我们的应用程序中，此路径是 /posts。当用户点击这些文章中的任何一篇时，用户将被带到该文章页面。对于每篇文章，路径都不同（/posts/article-1、/posts/article-2 等）。我们如何实现这一目标？我们可以为我们拥有的每个帖子添加一个新路由，但是每次发布新帖子时我们都必须更改我们的代码。

因此，我们将使用动态路由。

这个时候路由器参数就能派上用场了。

在我们的应用程序中，我们可以指定一个像 /posts 这样的通用路由，然后我们可以像这样 /posts/:id 一样为相同的路由指定可选的路由参数。 :id 选择任何动态字符串作为参数。这意味着我们现在可以路由到 /posts/article-1、/posts/article-2 等路径，并且应用程序中的 Vue 路由器将知道我们尝试去哪条路径。

修改App.vue如下：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> | 
    <router-link :to="{ name: 'profile', params: { username: 'mark2021' } }" >
      Profile
    </router-link>
  </div>
  <router-view/>
</template>

在我们的 router-link 标签中，我们可以使用 :to 属性传入一个带有名称和参数数据的对象。 params 对象可以是任何类型的数据（即字符串、数字、对象）。在上面的代码片段中，我们传入了一个用户名和字符串值 (mark2021) 的对象。

如何从View文件夹内的文件访问路由参数？

当我们将 Vue 路由器添加到我们的 Vue 应用程序时，我们可以访问我们应用程序全局范围内的特殊 $route 对象。这个对象保存了我们应用程序的所有路由器信息。我们可以通过简单地调用 this.$route 来访问 $route 对象。 params 信息也可在此 $route 对象中使用。我们可以通过 $route 对象访问 Profile 组件内部的 params 对象。

修改View文件夹内的Profile.vue文件，请看下面的代码为例：

    <template>
      <div class="profile">
        Profile Info
      </div>
      <span>
          {{ this.$route.params.username }}
      </span>
    </template>

生成效果如下所示：

Vue.js中Vue Router该如何掌握？本篇文章来说清楚

动态路由

下面是一个快速参考表，可帮助您直观地了解动态路由的工作原理。

route patternURL path$this.route.params
/product/:name/product/apple-watch{ name: "apple-watch"}
/product/:name/comment/:comment_id/product/apple-watch/comment/123{ name: 'apple-watch', comment_id: '123' }

在上一节中，我们看到了如何使用 传递附加信息。动态路由是一个类似的概念。在这种情况下，参数是 URL 本身的一部分。

让我们来看看如何在我们的应用程序中定义动态路由。

让我们在View文件夹下创建一个新文件并将其命名为 Product.vue，书写代码如下：

    <template>
      <div>
        Product Page
      </div>
      <span>
          Looking for Product: {{ this.$route.params.id }}
      </span>
    </template>

现在我们可以将此组件添加到我们的路由中。

    const routes = [
      // rest of the code ...
      { path: '/product/:id', component: Product },
    ]

请注意，我们向 URL 的 :id 附加了一个动态参数。

现在，如果您在浏览器中访问 http://localhost:8080/product/12343，您可以看到该组件可以访问通过 URL 传递的动态参数。

然后，我们可以使用此 ID 从生命周期挂钩中的 API 中获取实际产品。

Vue.js中Vue Router该如何掌握？本篇文章来说清楚

我们的 URL 中也可以有多个动态参数。动态段将映射到 $route.params 的相应字段。

让我们来看看它是如何工作的。我们将首先对我们的Product.vue进行一些快速的改变，修改代码如下：

    const routes = [
      // rest of the code ...
       { path: '/product/:id/:category', component: () => import('../views/Product.vue') }
    ]

现在我们指定了两个参数，而不是一个参数 :id。现在让我们进入路径 http://localhost:8080/product/12343/electronics 并打开 Vue devtools。正如您从下面的屏幕截图中看到的，我们现在可以访问 params 并且这些 params 映射到指定的变量名称 id 和 category。

Vue.js中Vue Router该如何掌握？本篇文章来说清楚

延迟加载

我们来谈谈延迟加载。这是 Vue Router 开箱即用的高级功能之一。让我们打开我们的开发工具并观察 js 选项卡。

Vue.js中Vue Router该如何掌握？本篇文章来说清楚

您可以看到，当我们第一次加载应用程序时，它加载了一个 app.js 脚本。当您导航到 /profile route 或 /product route 时，您可以看到没有正在加载新的 javascript。这是因为这些组件的所有 JavaScript 代码都已经加载了 app.js。在较小的应用程序中，这不是问题。

但是，如果我们有一个大型应用程序怎么办。在这种情况下，一次性加载所有 JS 代码会使页面加载时间显着延长。延迟加载用于避免这种情况。

当我们延迟加载时，我们只加载我们需要的部分，当我们需要它们的时候，代码如下：

    // router/index.js
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/profile',
        name: 'profile',
        component: Profile,
      },
      { path: '/product/:id', component: Product },
      {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
      }
    ]

看看 router/index.js 的第 17 行。

你还记得之前的例子吗？这里的 About 组件是通过箭头函数导入的。这是延迟加载的示例。与 Home、Profile 和 Product 组件不同，About 组件不会随 app.js 一起加载。 About 组件只会在用户访问 /about 路由时加载。这就是我们实现延迟加载所需要做的全部工作。这种延迟加载是通过 Webpack 的代码拆分功能完成的。在引擎盖下 Vue 使用 Webpack 作为打包器。

更新一下index.js的代码内容，如下所示：

    import { createRouter, createWebHistory } from 'vue-router'
    import Home from '../views/Home.vue'
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/profile',
        name: 'profile',
        component: () => import('../views/Profile.vue')
      },
      { path: '/product/:id', component: () => import('../views/Product.vue') },
      {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
      }
    ]
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    export default router

程序化导航

在我们的应用程序中，会出现我们希望以编程方式导航到另一个页面的场景。

在我们的应用程序中，我们可以通过 $router 访问路由器实例。

我们可以通过调用 this.$router 来访问它。

路由器实例有一个名为 push 的函数。此功能可用于导航到不同的路线。以下是它如何工作的一些示例：

    // route by route path
    this.$router.push('home')

    // object
    this.$router.push({ path: 'home' })

    // named route navigation with parameters
    this.$router.push({ name: 'user', params: { userId: '123' } })

    // with query params, resulting in /profile?info=some-info
    this.$router.push({ path: 'profile', query: { info: 'some-info' } })

以上就是Vue.js的路由内容了，想必大家通过以上的内容已经了解其中的精妙所在了，为将来的高深用法打下基础。

收 藏
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: