js更新地址栏,但是不刷新页面

记录一下第一次遇到更新地址栏但是不刷新页面的需求

有时候会遇到一些需求,比如复制地址,分享给别人 希望也保留筛选条件,但是之前做的时候筛选条件存储到的状态管理工具里面了,地址栏没有,所以为了更快的实现效果,可以通过筛选时把条件更新到地址栏上,但是不触发刷新,这样就可以了

// 更新后,地址存储到浏览器记录栈中(点击返回回返回更新地址栏前的地址,同history.push)
history.pushState(null, null, searchUrl);

// 更新后,地址替换掉当前在浏览器记录栈中的地址(点击返回回返回上一页的地址,同history.replace)
history.replaceState(null, null, searchUrl);
在这里插入图片描述
当前地址栏已经携带有部分参数了,所以我们需要先把已经携带的参数拿到,然后频道serachUrl中
在这里插入图片描述
筛选后,地址栏变成这种效果
在这里插入图片描述
因为存储到开始时间和结束时间,所以需要将字符串拼接成数组
在这里插入图片描述

searchUrl 是 地址栏?及?后面的信息,
我这个需求 第一个和第二个参数直接传null就可以了
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/312063.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何下载“ubuntu”在win10系统?

一、下载 企业开源和 Linux |Ubuntu的

解决jenkins需要jdk11,项目需要jdk8的问题

思路:jdk8 采用解压缩模式,jdk11采用安装模式,然后在jenkins中指定jdk路径 下载解压缩jdk8 https://www.oracle.com/java/technologies/downloads/#java8 解压缩:jdk-8u391-linux-i586.tar.gz /lib/ld-linux.so.2: bad ELF inte…

Realm Management Extension领域管理扩展之颗粒保护检查

本节描述了RME引入的颗粒保护检查。颗粒保护检查使得能够在不同的物理地址空间之间动态分配内存区域。 本节将向您介绍以下功能: 颗粒保护表的结构用于颗粒保护检查的故障报告区域在物理地址空间之间的过渡正如在物理地址一节中所述,RME提供了四个物理地址空间。以下图表显示…

搭建 MyBatis 环境

目录 1.添加依赖 2.数据库连接配置 3.配置XML路径 4.下载插件MyBatisX 5.如何使用 6.示例 1.添加依赖 创建新项目时添加两个依赖: MyBatis Framewrok 和 MySQL Driver 。 如果是在已经创建好的项目中配置mybatis环境。需要先下载一个插件:EditStarters 。 然…

JavaScript复习小案例

JavaScript实现简易留言板 效果图 完整代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>留言板</title><style>body {background-color: #f4f4f4;}/* 外部容器样式设置 */.wrapper {width: 400px;heigh…

探索 TCP 与 UDP:网络通信的两门学派(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

Vue3组件库 -- element plus 树形选择器组件怎样显示已有的树形菜单?

<el-tree-selectv-model"form.topmneu":data"tableData":props"{ label: title, value: id }":render-after-expand"false"style"width: 100%"check-strictly/> 添加 :props "{ lable : 字段名 , value: 字段…

Java并发之同步二:Java并发工具类

一、CountDownLatch &#xff08;1等多汇总、多等1 开关&#xff09; countdownlatch 底层原理&#xff0c;定义锁资源&#xff1a;0&#xff0c;当资源为0才叫拿到锁&#xff0c;所以countdownlatch也叫做倒数器&#xff0c;拿锁的时候判断是不是0&#xff0c;不是就park&…

NumPy 数据操作实用指南:从基础到高效(下)

文章接上篇&#xff1a; In [53]: from PIL import Image In [60]: dog Image.open(./dog.jpg) dog . . . In [61]: dog_datanp.array(dog) # 图片数据是ndarray # 彩色照片三维&#xff1a;高度&#xff0c;宽度&#xff0c;像素&#xff08;表示不同颜色&#xff09;&…

雪花代码-html版

雪花代码 动画效果 代码 <!DOCTYPE html><html><head><style>body {background-color: #000000;}.snowflake {position: absolute;font-size: 10px;color: #FFFFFF;text-shadow: 1px 1px 1px #000000;user-select: none;}</style></head>…

008-关于FPGA/ZYNQ直接处理图像传感器数据输出的若干笔记(裸板采集思路)

文章目录 前言一、图像传感器厂商二、图像传感器的参数解析三、图像传感器中的全局曝光和卷帘曝光四、处理传感器图像数据流程1.研究当前图像传感器输出格式2.FPGA处理图像数据 总结 前言 最近也是未来需要考虑做的一件事情是&#xff0c;如何通过FPGA/ZYNQ去做显微镜图像观测…

大数据Doris(五十四):SQL函数之日期函数(二)

文章目录 SQL函数之日期函数(二) 一、DAYOFMONTH(DATETIME date) 二、dayofweek(DATETIME date)

基于ssm社区老年人关怀服务系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本社区老年人关怀服务系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数…

题目:七段码(蓝桥OJ 595)

问题描述&#xff1a; 解题思路&#xff1a; 枚举每一种可能组合&#xff08;可以使用二进制数表示&#xff0c;每一个二进制就是一种组合&#xff09;&#xff0c;在判断是否符合题目要求的每一个发光灯管相邻&#xff08;使用并查集方法确定&#xff0c;当每一个发光…

vue2中关于elementUI的自定义上传

一、项目背景 在项目中采用了admin模板&#xff0c;和elementUI组件。需求为手动选择文件可多选上传并显示图片 效果图为 二、自定义上传中遇到的问题 http-request覆盖默认的上传行为&#xff0c;可以自定义上传的实现function—— 在文档中存在这样一个自定义上传&#…

代码随想录day25 回溯算法加强练习

216.组合总和III 题目 找出所有相加之和为 n 的 k 个数的组合。组合中只允许含有 1 - 9 的正整数&#xff0c;并且每种组合中不存在重复的数字。 说明&#xff1a; 所有数字都是正整数。解集不能包含重复的组合。 示例 1: 输入: k 3, n 7 输出: [[1,2,4]] 示例 2: 输入…

jmeter分布式服务搭建

目录 一、环境准备 二、 安装包下载 三 、安装jdk 四 、控制机安装 4.1 解压压缩包 4.2 修改 bin/jmeter.properties 4.3 修改 bin/system.properties 五、执行机安装 5.1 解压安装包 5.2 修改 bin/jmeter.properties 5.3 修改 bin/system.properties 5.4 启动执行机 …

便捷好用的iOS文件管理App

便捷好用的iOS文件管理App 摘要 本文介绍了一款功能强大、免费的iOS文件管理App——克魔助手。通过使用克魔助手&#xff0c;用户可以轻松管理手机存储空间&#xff0c;清理垃圾文件&#xff0c;整理文件&#xff0c;并进行文件传输和截图操作。本文将详细介绍克魔助手的各项…

linux部署apache服务部署静态网站

第一步&#xff1a;配置IP地址 第二步&#xff1a;创建挂载点 配置yum仓库 mkdir -p /media/cdrom 挂载 mount /dev/cdrom /media/cdrom 安装服务 安装yum源 启用httpd服务程序并将其加入到开机启动项中 建立网站数据保存目录&#xff0c;并创建首页文件 mkdir /home/wwwroo…

OpenHarmony4.0适配LVDS屏幕驱动

1.概述 手头有一块RK3568的开发板OK3568-C&#xff0c;但是还没有适配OpenHarmony&#xff0c;用的还是LVDS屏幕&#xff0c;但是官方和网上好像还没有OpenHarmony4.0的LVDS屏幕驱动的通用实现&#xff0c;所以决定尝试了一下适配该开发板&#xff0c;完成LVDS屏幕驱动的适配&…