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

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

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

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

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

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

相关推荐

  1. js如何实现修改URL参数并刷新页面

    2024-01-11 17:20:03       35 阅读
  2. vue 页面刷新、重置、更新页面所有数据

    2024-01-11 17:20:03       75 阅读
  3. jsp+ajax自动刷新局部页面

    2024-01-11 17:20:03       54 阅读
  4. vue实现进入某个页面后替换地址路径

    2024-01-11 17:20:03       29 阅读
  5. vue3对象reactive()数据改变页面刷新

    2024-01-11 17:20:03       54 阅读
  6. 小程序跳转tabbar,tabbar页面刷新

    2024-01-11 17:20:03       70 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-11 17:20:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-11 17:20:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-11 17:20:03       82 阅读
  4. Python语言-面向对象

    2024-01-11 17:20:03       91 阅读

热门阅读

  1. What does rpm do?

    2024-01-11 17:20:03       56 阅读
  2. Linux 之间通过 SSH 传输文件

    2024-01-11 17:20:03       52 阅读
  3. linux踢掉远程登录用户*

    2024-01-11 17:20:03       53 阅读
  4. 【Unity】优化 if else 和 Switch Case

    2024-01-11 17:20:03       51 阅读
  5. web安全之XSS攻击原理及防范

    2024-01-11 17:20:03       61 阅读
  6. angular-tree-component组件中实现特定节点自动展开

    2024-01-11 17:20:03       67 阅读
  7. Python爬虫快速入门

    2024-01-11 17:20:03       52 阅读
  8. TypeScript使用技巧内置工具类型详解

    2024-01-11 17:20:03       58 阅读
  9. git branch 用法汇总和实际使用用例

    2024-01-11 17:20:03       61 阅读