vue3页面之间传递参数URL方式

2025-10-27 09:16:37 作者：内向蛋挞

文章建议在两个组件之间通过URL传递参数,而不是使用Vuex或总线事件,因为它们对于简单的跳转页面关系来说是过度的,页面1通过跳转并使用模板字符串传递ID,页面2通过获取URL参数来接收并显示

vue3页面之间传递参数URL

本地存储不至于，vuex也浪费，两个组件之间只是跳转页面关系，没有必要进行一个bus总线，

可以使用url进行一个地址栏信息传递，

router.push(`/template/indexAdd/?id=${val.id}`)

采用跳转页面加上模板字符串，传递一个id

地址会显示

 const { id } = route.query//结构赋值方法获取
 const id = route.query.id//赋值获取

千万不要忘了引入

  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。