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

百度已收录   阅读次数: 58
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: