【愚公系列】《循序渐进Vue.js 3.x前端开发实践》059-Vue Router的路由传参

标题详情
作者简介愚公搬代码
头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。
近期荣誉2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳博主等。
博客内容.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎👍点赞、✍评论、⭐收藏


🚀前言

在单页面应用(SPA)的开发中,路由不仅仅是页面的导航工具,更是实现组件间数据传递的重要桥梁。Vue Router 作为 Vue.js 的官方路由管理器,提供了灵活的路由传参功能,使得开发者能够轻松地将数据从一个页面传递到另一个页面,增强了应用的交互性与用户体验。

本文将深入探讨 Vue Router 中的路由传参机制,包括动态路由参数和查询参数的使用。我们将详细讲解如何在路由中定义参数、如何在组件中获取这些参数,以及如何将参数传递给其他路由。通过具体的代码示例,我们将展示如何在实际开发中灵活运用路由传参,从而实现更复杂的页面交互和数据展示。

🚀一、Vue Router的路由传参

在过去,我们习惯使用 route.params 来获取路由传递的参数,尽管这种方式有效,但它让组件与路由配置紧密耦合,影响了组件的复用性。本节将探讨一种更为灵活的路由传参方式——使用属性的方式进行参数传递。

🔎1. 传统的参数获取方式

还记得我们编写的用户设置页面是如何获取路由传递的 id 参数的吗?代码如下:

<template>
  <h1>用户设置</h1>
  <h2>id: {{ $route.params.id }}</h2>
</template>

<script>
export default {
  name: 'UserSetting'
}
</script>

由于在组件的模板内部直接使用了 $route 属性,这导致该组件的通用性大大降低。我们可以通过属性传递参数来增强组件的复用性。

🔎2. 使用属性传递参数

首先,将组件中所有耦合路由的部分去除掉,修改如下:

<script setup>
defineProps(['id'])
</script>

<template>
  <h1>用户设置</h1>
  <h2>id: {{ id }}</h2>
</template>

现在,UserSetting 组件能够通过外部传递的属性来实现内部逻辑。接下来,我们需要将路由的传参映射到外部属性上。

🔎3. 路由配置映射到属性

Vue Router 默认支持属性传递功能。在定义路由时,将 props 设置为 true,则路由中传递的参数会自动映射到组件定义的外部属性。代码如下:

const routes = [
  {
    path: '/user/:id(\\d+)',
    component: UserSetting,
    props: true  // 将路由参数映射为组件的 props
  }
];

这样,路由参数会自动传递到 UserSetting 组件的 id 属性中。

高级配置

🦋3.1 命名视图中的属性传递

对于有多个页面出口的同级命名视图,我们需要对每个视图的 props 单独进行设置,示例如下:

const routes = [
  {
    path: '/home/:username/:id',
    components: {
      topBar: User,
      default: UserSetting
    },
    props: {
      topBar: true,
      default: true
    }
  }
];

🦋3.2 使用对象传递静态属性

如果组件内部需要的参数与路由本身并没有直接关系,我们也可以将 props 设置为对象,此时 props 设置的数据将原样传递给组件的外部属性。例如:

const routes = [
  {
    path: '/user/:id(\\d+)',
    component: UserSetting,
    props: { id: '000' }  // 固定传递 id 属性为 '000'
  }
];

此时路由中的 id 参数将被弃用,组件中获取到的 id 属性值将固定为 “000”。

🦋3.3 使用函数动态传递属性

props 还有一种更便捷的使用方式,可以直接将其设置为一个函数,函数返回要传递到组件的外部属性对象,这种方式动态性很好,示例如下:

const routes = [
  {
    path: '/user/:id(\\d+)',
    component: UserSetting,
    props: route => {
      return {
        id: route.params.id,
        other: 'other'
      };
    }
  }
];

这种方式可以根据路由参数动态生成传递给组件的属性。

🔎4.总结

  1. 传统的参数获取方式:直接使用 $route.params,会导致组件与路由耦合。
  2. 使用属性传递参数:通过 definePropsprops 映射路由参数,使组件更加通用和可复用。
  3. 命名视图中的属性传递:对每个命名视图单独设置 props
  4. 使用对象传递静态属性:将静态数据传递给组件。
  5. 使用函数动态传递属性:根据路由参数动态生成传递给组件的属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

愚公搬代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值