当前位置: 首页 > news >正文

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奇迹天蝎 的文章

http://www.lryc.cn/news/421654.html

相关文章:

  • Unity新输入系统结构概览
  • 18104 练习使用多case解题
  • 【AI人工智能】文心智能体 - 你的专属车牌设计师
  • Linux-服务器硬件及RAID配置实验
  • 白屏检测系统的设计与实现
  • Real-Time Open-Vocabulary Object Detection:使用Ultralytics框架进行YOLO-World目标检测
  • 区块链用什么编程语言实现?
  • 【网络编程】UDP通信基础模型实现
  • Docker Compose 常用命令详解
  • 超级外链工具,可发9600条优质外链
  • VisionPro二次开发学习笔记13-使用CogToolBlock进行图像交互
  • 比特币价格分析:市场重置完成,下一个目标:70,000 美元
  • 大模型笔记5 Extractive QA任务评估
  • RCE绕过方式
  • Flutter 电视投屏模块
  • 【机器学习】卷积神经网络简介
  • 时间函数链接函数等
  • Android控件(示例)
  • 图论------贝尔曼-福德(Bellman-Ford)算法
  • 带你彻底搞懂useLayoutEffect的使用场景
  • 大厂进阶之二:React高级用法HOC、Hooks对比、异步组件
  • 【扒代码】ope.py
  • 【Rust光年纪】探索Rust终端编程:从跨平台操作到用户界面设计
  • 67、ceph
  • 最大正方形[中等]
  • JavaScript 浅谈观察者模式 前端设计模式
  • 【自动驾驶】自定义消息格式的话题通信(C++版本)
  • 提升前端性能的JavaScript技巧
  • “服务之巅:Spring Cloud中SLA监控与管理的艺术“
  • ChatGPT角色定位提问提示词和指令完整版