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

举报
愚公搬代码 发表于 2025/03/30 17:30:03 2025/03/30
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳...
标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,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. 使用函数动态传递属性:根据路由参数动态生成传递给组件的属性。
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。