vue3路由跳转传递参数: params传参接收不到?

params方法传递参数优势:

1.不可见

2.不会造成地址栏不美观

传统写法:

router地址必须是name方法跳转,接收:route.params

 
import { useRouter } from "vue-router";
 
const router = useRouter();
// 提现记录
const withdrawalClick = (item) => {
  router.push({ name: "detail", params: { page: 123 } });
};
 
 
//跳转页面接收参数
import { useRoute } from "vue-router";
 
const route = useRoute();
console.log(route.params);

问题:vue3 由于刷新导致参数丢失,params传统使用方法去掉了  

router/packages/router/CHANGELOG.md at main · vuejs/router · GitHub

vu3推荐的路由跳转传参方法:

1.使用query传递参数

2.使用vuex、pinia对参数进行存储

3.使用 History API 方式传递和接收

 参考案例(history方法)

params需要使用state替代,如下:

//跳转之前页面
function onRowClick(e) {
  router.replace({path: `/orderDetails`, state: {detail: JSON.stringify(e)}},)
}

//跳转之后页面,接收在setup onActivated
onActivated(()=>{
  let detail = history.state.detail
  orderInfo.value = JSON.parse(detail || {})
})

  • 9
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值