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.push
或 router.replace
)
通过 router.push
或 router.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>
在目标组件中获取 state
(UserProfile.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;
在组件中接收 props
(UserProfile.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中,使用组合式API来传递路由参数是一种常见的需求。Vue Router 是 Vue.js 的官方路由管理工具,可以在不同的场景下通过多种方式传递和接收路由参数。下面将详细讲解几种常见的路由传值方式,并提供相应的代码示例。 1. 通过路由参数传…...

两分钟解决 :![rejected] master -> master (fetch first) , 无法正常push到远端库
目录 分析问题的原因解决 分析问题的原因 在git push的时候莫名遇到这种情况 若你在git上修改了如README.md的文件。由于本地是没有README.md文件的,所以导致 远端仓库git和本地不同步。 将远端、本地进行合并就可以很好的解决这个问题 注意:直接git pu…...
浏览器安全(同源策略及浏览器沙箱)
一、同源策略(Same Origin Policy) 1.定义 同源策略(Same - origin Policy)是一种浏览器的安全机制。它规定一个网页的脚本只能访问和操作与它同源的资源。这里的 “源” 包括协议(如 http、https)、域名&…...

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

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

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

HarmonyOS NEXT边学边玩:从零实现一个影视App(六、视频播放页的实现)
在HarmonyOS NEXT中,ArkUI是一个非常强大的UI框架,能够帮助开发者快速构建出美观且功能丰富的用户界面。本文将详细介绍如何使用ArkUI实现一个影视App的视频播放页面。将从零开始,逐步构建一个功能完善的视频播放页面,并解释每一部…...
salesforce实现一个字段的默认初始值根据另一个字段的值来自动确定
在 Salesforce 中,可以通过 公式字段 或 触发器 (Trigger) 实现字段的默认初始值根据另一个字段的值来自动确定,具体实现方法如下: 1. 使用公式字段 公式字段是一种动态字段,值会根据公式实时计算。 步骤: 导航到字段…...
Linux 文件权限详解
目录 前言 查看文件权限 修改文件权限 符号方式 数字方式 前言 Linux 文件权限是系统中非常重要的概念之一,用于控制对文件和目录的访问。权限分为读(Read)、写(Write)、执行(Execute)三个…...

【混合开发】CefSharp+Vue桌面应用程序开发
为什么选择CefSharpVue做桌面应用程序 CefSharp 基于 Chromium Embedded Framework (CEF) ,它可以将 Chromium 浏览器的功能嵌入到 .NET 应用程序中。通过 CefSharp,开发者可以在桌面应用程序中集成 Web 技术,包括 HTML、JavaScript、CSS 等…...
springBoot项目使用Elasticsearch教程
目录 一、引言(一)使用背景(二)版本库区别 二、引入依赖(一)springboot集成的es依赖(建议)(二)es提供的客户端库 三、配置(以yaml文件为例&#x…...

模型 多元化思维(系统科学)
系列文章分享模型,了解更多👉 模型_思维模型目录。融合多学科知识,全面解决问题。 1 多元化思维模型的应用 1.1 完美日记的私域流量运营 完美日记作为美妆行业的新兴品牌,通过多元化的思维模型在私域流量运营中取得了显著成功。…...
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全面解析与深入拓展
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯一、什么是size_t?为什么需要size_t? 💯二、size_t的特性与用途1. size_t是无符号类型示例: 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 创建的,用于管理 Linux 内核源代码。像 GitHub 这样的整个服务都是基于它的。因此,如果您想在 Linux 世界中进行编程或将 IBM 的 DevOps Services 与 Git 结合使用,那…...
C语言变长嵌套数组常量初始化定义技巧
有时候,我们需要在代码里配置一些常量结构,比如一个固定的动作流程ActionFlow:包含N(即flow_num)个动作列表(ActionArray),每个动作列表包含M(即act_num)个可…...

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

【深度学习】关键技术-激活函数(Activation Functions)
激活函数(Activation Functions) 激活函数是神经网络的重要组成部分,它的作用是将神经元的输入信号映射到输出信号,同时引入非线性特性,使神经网络能够处理复杂问题。以下是常见激活函数的种类、公式、图形特点及其应…...
网关相关知识
文章目录 什么是网关网关的主要作用网关的运用 什么是网关 网关又称网间连接器、协议转换器,也就是网段(局域网、广域网)关卡,不同网段中的主机不能直接通信,需要通过关卡才能进行互访,比如IP地址为192.168.31.9(子网掩码&#x…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候,难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵,或者买了二手 iPhone 却被原来的 iCloud 账号锁住,这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置,使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中,附加包含目录、附加库目录和附加依赖项是三个至关重要的设置,它们相互配合,确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中,这些概念容易让人混淆,但深入理解它们的作用和联…...

莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版,莫兰迪调色板清新简约工作汇报PPT模版,莫兰迪时尚风极简设计PPT模版,大学生毕业论文答辩PPT模版,莫兰迪配色总结计划简约商务通用PPT模版,莫兰迪商务汇报PPT模版,…...