vue3页面之间传递参数URL方式
更新时间：2025年10月27日 09:16:36 作者：内向蛋挞
文章建议在两个组件之间通过URL传递参数,而不是使用Vuex或总线事件,因为它们对于简单的跳转页面关系来说是过度的,页面1通过跳转并使用模板字符串传递ID,页面2通过获取URL参数来接收并显示
vue3页面之间传递参数URL
本地存储不至于，vuex也浪费，两个组件之间只是跳转页面关系，没有必要进行一个bus总线，
可以使用url进行一个地址栏信息传递，
页面1
router.push(`/template/indexAdd/?id=${val.id}`)采用跳转页面加上模板字符串，传递一个id
地址会显示
页面2获取页面1的参数
const { id } = route.query//结构赋值方法获取
const id = route.query.id//赋值获取千万不要忘了引入
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Element-Plus 是 Element UI 的 Vue 3 版本,它提供了一套完整的组件库,在使用 Element-Plus 进行开发时,我们可能会遇到需要自定义组件样式的情况,本文将介绍如何使用 CSS 来去除 Element-Plus 下拉框的边框,需要的朋友可以参考下2024-03-03
本篇文章主要介绍了vue-router路由的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
element中async-validator异步请求验证使用
本文主要介绍了element中async-validator异步请求验证使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了vue elementui tree 任意级别拖拽功能代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要给大家介绍了关于vue3使用vue3-print-nb实现区域打印功能的相关资料,在日常操作中,相信很多人在Vue怎么用插件实现打印功能问题上存在疑惑,需要的朋友可以参考下2023-07-07
本文通过实例代码给大家介绍了vue interceptor 使用,需要的朋友可以参考下2018-09-09
Vue报错Syntax Error:TypeError: this.getOptions is not a
前几天在vue运行项目过程中报错了,所以下面这篇文章主要给大家介绍了关于Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue正确使用watch监听属性变化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了详解Vue串联过滤器的使用场景，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
这篇文章主要介绍了vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
最新评论