vue3 路由带传参跳转;刷新后消失。一次性参数使用。

解决vue3 怎么做到路由跳转传参刷新后消失
解决路由跳转传参去除问题

想要跳转后根据参数显示对应的tab,但url传参刷新会持续保留无法重置。
router.replace替换又会导致显示内容为router.replace后的,传参目的丢失。

业务逻辑: 完成对应操作后(点击按钮)返回指定页面(recruit/enterprise/position页面)

// 页面A
const handleCancel = (hire) => { //  hire:是否是众聘岗位
  router.push({ path: '/recruit/enterprise/position', query: { hire: hire ? 1 : 0 } })
}

在这里插入图片描述

在这里插入图片描述

// 页面B
const showHire = (route.query?.hire - 0) || 0
const tab = ref(showHire ? 4: 1)
if (showHire) history.replaceState({ ...route.query, hire: 0 }, '', route.path)
// 更新浏览器历史记录,不触发页面重新加载 ( 目的:去除目标参数 )
// 参数完全不保留使用history.replaceState({}, '', newUrl),传入{}空对象
// 不使用vue的话可以window.location.href.replace(/\?.*$/, "")或者window.location.hash.replace(/\?.*$/, "")获取路由

参考于https://zhuanlan.zhihu.com/p/691957141奇迹天蝎 的文章

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值