当前位置: 首页 > news >正文

Vue3中使用组合式API通过路由传值详解

在Vue 3中,使用组合式API来传递路由参数是一种常见的需求。Vue Router 是 Vue.js 的官方路由管理工具,可以在不同的场景下通过多种方式传递和接收路由参数。下面将详细讲解几种常见的路由传值方式,并提供相应的代码示例。

1. 通过路由参数传值(动态路由参数)

路由参数是一种最常用的传值方式,通常用于 URL 路径中。例如,某个页面需要根据用户 ID 来加载数据。

使用场景:
  • 根据路由参数(如用户ID)显示不同的数据或组件。
代码示例:

定义路由(router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import UserProfile from '../views/UserProfile.vue';const routes = [{path: '/',name: 'Home',component: Home},{path: '/user/:id',  // 使用动态路由参数name: 'UserProfile',component: UserProfile}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});export default router;

在组件中使用路由参数(UserProfile.vue

<template><div><h1>User Profile</h1><p>User ID: {{ userId }}</p></div>
</template><script setup>
import { useRoute } from 'vue-router';// 获取路由对象
const route = useRoute();// 从路由中获取动态参数
const userId = route.params.id;
</script>

2. 通过查询参数传值(URL查询字符串)

查询参数通常用于传递不属于路径的一些附加信息,适合用于过滤、分页等场景。

使用场景:
  • 向一个页面传递一些过滤条件、分页信息等。
代码示例:

定义路由(router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import SearchResults from '../views/SearchResults.vue';const routes = [{path: '/search',name: 'SearchResults',component: SearchResults}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});export default router;

在组件中使用查询参数(SearchResults.vue

<template><div><h1>Search Results</h1><p>Search Query: {{ searchQuery }}</p></div>
</template><script setup>
import { useRoute } from 'vue-router';// 获取查询参数
const route = useRoute();
const searchQuery = route.query.q;
</script>

访问 URL:

http://localhost:8080/search?q=vue3

3. 通过 state 传值(使用 router.pushrouter.replace

通过 router.pushrouter.replace 方法,除了可以传递路径、查询参数外,还可以使用 state 来传递一些临时的状态数据。这种方式非常适合传递一些短期的、不需要在 URL 中显示的值。

使用场景:
  • 在路由跳转时传递一些临时的数据,比如在表单提交后跳转到详情页,并传递表单数据。
代码示例:

跳转时使用 state 传值(在组件中使用 router.push

<template><div><button @click="goToUserProfile">Go to User Profile</button></div>
</template><script setup>
import { useRouter } from 'vue-router';const router = useRouter();const goToUserProfile = () => {router.push({ name: 'UserProfile',params: { id: '123' },state: { fromDashboard: true }});
};
</script>

在目标组件中获取 stateUserProfile.vue

<template><div><h1>User Profile</h1><p>User ID: {{ userId }}</p><p v-if="fromDashboard">Navigated from Dashboard</p></div>
</template><script setup>
import { useRoute, useRouter } from 'vue-router';// 获取路由参数
const route = useRoute();
const userId = route.params.id;// 获取路由状态
const router = useRouter();
const fromDashboard = router.currentRoute.value.state?.fromDashboard;
</script>

4. 通过 props 传值(配合路由的 props 配置)

Vue Router 支持将路由参数直接作为 props 传递给组件。这对于需要从路由中解耦组件逻辑的情况非常有用。

使用场景:
  • 将路由参数直接作为组件的 props 传递,减少路由与组件之间的耦合。
代码示例:

定义路由(router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import UserProfile from '../views/UserProfile.vue';const routes = [{path: '/user/:id',name: 'UserProfile',component: UserProfile,props: true  // 开启 props 传递}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});export default router;

在组件中接收 propsUserProfile.vue

<template><div><h1>User Profile</h1><p>User ID: {{ id }}</p></div>
</template><script setup>
// 接收路由参数作为 props
defineProps({id: String
});
</script>

5. 总结

在 Vue 3 中,可以通过不同的方式在路由之间传递值,选择哪种方式取决于具体的使用场景:

  • 动态路由参数:适用于需要根据 URL 动态改变内容的场景。
  • 查询参数:适用于传递额外的过滤条件或分页信息。
  • state:适用于传递不需要展示在 URL 中的临时数据。
  • props:适用于将路由参数直接作为组件的 props,简化组件的逻辑。

这些传值方法可以根据实际需求组合使用,以提供更灵活的路由管理和数据传递机制。

相关文章:

Vue3中使用组合式API通过路由传值详解

在Vue 3中&#xff0c;使用组合式API来传递路由参数是一种常见的需求。Vue Router 是 Vue.js 的官方路由管理工具&#xff0c;可以在不同的场景下通过多种方式传递和接收路由参数。下面将详细讲解几种常见的路由传值方式&#xff0c;并提供相应的代码示例。 1. 通过路由参数传…...

两分钟解决 :![rejected] master -> master (fetch first) , 无法正常push到远端库

目录 分析问题的原因解决 分析问题的原因 在git push的时候莫名遇到这种情况 若你在git上修改了如README.md的文件。由于本地是没有README.md文件的&#xff0c;所以导致 远端仓库git和本地不同步。 将远端、本地进行合并就可以很好的解决这个问题 注意&#xff1a;直接git pu…...

浏览器安全(同源策略及浏览器沙箱)

一、同源策略&#xff08;Same Origin Policy&#xff09; 1.定义 同源策略&#xff08;Same - origin Policy&#xff09;是一种浏览器的安全机制。它规定一个网页的脚本只能访问和操作与它同源的资源。这里的 “源” 包括协议&#xff08;如 http、https&#xff09;、域名&…...

w~Transformer~合集11

我自己的原文哦~ https://blog.51cto.com/whaosoft/12472192 #LightSeq 最高加速9倍&#xff01;字节跳动开源8比特混合精度Transformer引擎,近年来&#xff0c;Transformer 已经成为了 NLP 和 CV 等领域的主流模型&#xff0c;但庞大的模型参数限制了它的高效训练和推理。…...

Coursera四门课备考入学考试

某学校入学考试复习用&#xff0c;刷到的话纯靠缘分&#xff0c;不方便回答多余问题 &#xff08;博主本人waive掉了没有考过&#xff0c;但还是基本都学完了&#xff09; 记录学习coursera的四门课&#xff08;顺序Py在DS前&#xff0c;其他无所谓&#xff09; Mathematics fo…...

Flink(八):DataStream API (五) Join

1. Window Join Window join 作用在两个流中有相同 key 且处于相同窗口的元素上。这些窗口可以通过 window assigner 定义&#xff0c;并且两个流中的元素都会被用于计算窗口的结果。两个流中的元素在组合之后&#xff0c;会被传递给用户定义的 JoinFunction 或 FlatJoinFunct…...

HarmonyOS NEXT边学边玩:从零实现一个影视App(六、视频播放页的实现)

在HarmonyOS NEXT中&#xff0c;ArkUI是一个非常强大的UI框架&#xff0c;能够帮助开发者快速构建出美观且功能丰富的用户界面。本文将详细介绍如何使用ArkUI实现一个影视App的视频播放页面。将从零开始&#xff0c;逐步构建一个功能完善的视频播放页面&#xff0c;并解释每一部…...

salesforce实现一个字段的默认初始值根据另一个字段的值来自动确定

在 Salesforce 中&#xff0c;可以通过 公式字段 或 触发器 (Trigger) 实现字段的默认初始值根据另一个字段的值来自动确定&#xff0c;具体实现方法如下&#xff1a; 1. 使用公式字段 公式字段是一种动态字段&#xff0c;值会根据公式实时计算。 步骤&#xff1a; 导航到字段…...

Linux 文件权限详解

目录 前言 查看文件权限 修改文件权限 符号方式 数字方式 前言 Linux 文件权限是系统中非常重要的概念之一&#xff0c;用于控制对文件和目录的访问。权限分为读&#xff08;Read&#xff09;、写&#xff08;Write&#xff09;、执行&#xff08;Execute&#xff09;三个…...

【混合开发】CefSharp+Vue桌面应用程序开发

为什么选择CefSharpVue做桌面应用程序 CefSharp 基于 Chromium Embedded Framework (CEF) &#xff0c;它可以将 Chromium 浏览器的功能嵌入到 .NET 应用程序中。通过 CefSharp&#xff0c;开发者可以在桌面应用程序中集成 Web 技术&#xff0c;包括 HTML、JavaScript、CSS 等…...

springBoot项目使用Elasticsearch教程

目录 一、引言&#xff08;一&#xff09;使用背景&#xff08;二&#xff09;版本库区别 二、引入依赖&#xff08;一&#xff09;springboot集成的es依赖&#xff08;建议&#xff09;&#xff08;二&#xff09;es提供的客户端库 三、配置&#xff08;以yaml文件为例&#x…...

模型 多元化思维(系统科学)

系列文章分享模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。融合多学科知识&#xff0c;全面解决问题。 1 多元化思维模型的应用 1.1 完美日记的私域流量运营 完美日记作为美妆行业的新兴品牌&#xff0c;通过多元化的思维模型在私域流量运营中取得了显著成功。…...

Google地图瓦片爬虫

地图地址说明 1、谷歌矢量(中文标注) http://mt{0-3}.google.cn/vt/vm416115521&hlzh-CN&glcn&x{x}&y{y}&z{z}&sGalileo 2、谷歌矢量(英文标注) http://mt{0-3}.google.cn/vt/vm416115521&hlen&glcn&x{x}&y{y}&z{z}&sGali…...

【C++】size_t全面解析与深入拓展

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;一、什么是size_t&#xff1f;为什么需要size_t&#xff1f; &#x1f4af;二、size_t的特性与用途1. size_t是无符号类型示例&#xff1a; 2. size_t的跨平台适应性示例对…...

Web端实时播放RTSP视频流(监控)

一、安装ffmpeg: 1、官网下载FFmpeg: Download FFmpeg 2、点击Windows图标,选第一个:Windows builds from gyan.dev 3、跳转到下载页面: 4、下载后放到合适的位置,不用安装,解压即可: 5、配置path 复制解压后的\bin路径,配置环境变量如图: <...

学习 Git 的工作原理,而不仅仅是命令

Git 是常用的去中心化源代码存储库。它是由 Linux 创建者 Linus Torvalds 创建的&#xff0c;用于管理 Linux 内核源代码。像 GitHub 这样的整个服务都是基于它的。因此&#xff0c;如果您想在 Linux 世界中进行编程或将 IBM 的 DevOps Services 与 Git 结合使用&#xff0c;那…...

C语言变长嵌套数组常量初始化定义技巧

有时候&#xff0c;我们需要在代码里配置一些常量结构&#xff0c;比如一个固定的动作流程ActionFlow&#xff1a;包含N&#xff08;即flow_num&#xff09;个动作列表&#xff08;ActionArray&#xff09;&#xff0c;每个动作列表包含M&#xff08;即act_num&#xff09;个可…...

如何查看特定版本的Spring源码

写在前面&#xff1a;大家好&#xff01;我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正&#xff0c;感谢大家的不吝赐教。我的唯一博客更新地址是&#xff1a;https://ac-fun.blog.csdn.net/。非常感谢大家的支持。一起加油&#xff0c;冲鸭&#x…...

【深度学习】关键技术-激活函数(Activation Functions)

激活函数&#xff08;Activation Functions&#xff09; 激活函数是神经网络的重要组成部分&#xff0c;它的作用是将神经元的输入信号映射到输出信号&#xff0c;同时引入非线性特性&#xff0c;使神经网络能够处理复杂问题。以下是常见激活函数的种类、公式、图形特点及其应…...

网关相关知识

文章目录 什么是网关网关的主要作用网关的运用 什么是网关 网关又称网间连接器、协议转换器&#xff0c;也就是网段(局域网、广域网)关卡&#xff0c;不同网段中的主机不能直接通信&#xff0c;需要通过关卡才能进行互访&#xff0c;比如IP地址为192.168.31.9(子网掩码&#x…...

避开深沟槽工艺的“坑”:从DLTS数据到TCAD仿真的硅光电二极管陷阱态优化实战

硅光电二极管陷阱态优化的工程实践&#xff1a;从DLTS表征到TCAD仿真 在半导体制造领域&#xff0c;深沟槽隔离&#xff08;DTI&#xff09;工艺虽然能有效解决器件间的串扰问题&#xff0c;但其引入的界面陷阱态却成为光电二极管性能提升的"隐形杀手"。工艺工程师们…...

KityMinder云存储与分享功能完整指南:打造高效团队协作体验

KityMinder云存储与分享功能完整指南&#xff1a;打造高效团队协作体验 【免费下载链接】kityminder 百度脑图 项目地址: https://gitcode.com/gh_mirrors/ki/kityminder KityMinder作为百度FEX团队开发的在线思维导图工具&#xff0c;其强大的云存储与分享功能让团队协…...

无需本地安装,用快马平台5分钟搭建git操作可视化原型

最近在准备一个Git入门教学项目时&#xff0c;发现很多新手卡在环境配置这一步。传统方式需要先安装Git客户端、配置SSH密钥、设置全局参数&#xff0c;光是这些前置操作就能劝退不少人。于是尝试用InsCode(快马)平台的云端开发环境&#xff0c;意外发现能跳过所有安装步骤直接…...

华为交换机等保2.0实战:手把手配置身份鉴别,从密码策略到登录超时

华为交换机等保2.0身份鉴别全流程配置指南 当企业网络面临等保2.0合规检查时&#xff0c;身份鉴别环节往往是整改重点。作为网络安全工程师&#xff0c;我曾协助多家企业通过等保测评&#xff0c;发现华为交换机的身份鉴别配置存在不少易忽略的细节。本文将分享一套经过实战验证…...

智能表格在敏捷项目管理中的工时统计实践

1. 为什么敏捷团队需要智能工时统计 在敏捷开发中&#xff0c;两周一次的迭代就像一场短跑比赛。我见过太多团队在冲刺过半时才发现工时严重超支&#xff0c;这时候再调整已经来不及了。传统Excel表格需要手动更新公式&#xff0c;光是合并不同成员的工作量报表就能消耗半天时间…...

FunASR Docker部署SSL配置的四个‘天坑’与避坑指南(附完整启动命令)

FunASR Docker部署SSL配置的四个‘天坑’与避坑指南&#xff08;附完整启动命令&#xff09; 在语音识别服务的安全部署中&#xff0c;SSL/TLS加密已成为行业标配。但当我们实际为FunASR配置HTTPS时&#xff0c;那些看似简单的步骤背后却暗藏玄机。本文将带您穿越四个最具迷惑性…...

数谷智能和爱莫科技,非标准数据 AI 定制处理谁更强?

在数字化转型步入“深水区”的今天&#xff0c;企业面临的最大挑战不再是标准化的数据库信息&#xff0c;而是占据企业数据总量 80% 以上的“非标准数据”。这些数据散落在手写单据、非结构化合同、复杂的网页信息、甚至是不规则的工业图像中。如何高效、精准地处理这些非标数据…...

手把手教你用PyTorch 2.0复现风源AI气象模型(附GitHub源码解读)

手把手教你用PyTorch 2.0复现风源AI气象模型&#xff08;附GitHub源码解读&#xff09; 气象预测正经历从传统数值模拟到AI驱动的范式转移。本文将带您深入风源模型的技术内核——一个融合卫星遥感与深度学习的混合架构&#xff0c;通过PyTorch 2.0实现从数据预处理到模型推理的…...

MATLAB实战:如何用三种噪声干扰模拟器提升脉冲雷达抗干扰能力

MATLAB实战&#xff1a;三种噪声干扰模拟器在脉冲雷达抗干扰测试中的应用 雷达系统在现代电子战中扮演着关键角色&#xff0c;而抗干扰能力是评估雷达性能的重要指标。本文将深入探讨如何利用MATLAB构建射频噪声、调幅噪声和调频噪声三种干扰模拟器&#xff0c;通过完整的代码实…...

如何利用ESP-CSI技术实现无线环境感知:完整实战指南

如何利用ESP-CSI技术实现无线环境感知&#xff1a;完整实战指南 【免费下载链接】esp-csi Applications based on Wi-Fi CSI (Channel state information), such as indoor positioning, human detection 项目地址: https://gitcode.com/GitHub_Trending/es/esp-csi 你是…...