js怎么不进行跳转但是给路径带上参数

在JavaScript中,如果你想要给路径添加参数但不执行实际的跳转,你可以使用window.history.pushState方法或者window.history.replaceState方法来更新浏览器的历史记录状态,但不改变当前页面。这样你就可以给URL添加查询参数,而不会导致页面刷新或跳转。

以下是一个简单的例子,展示如何使用pushState给当前URL添加参数:

javascript 复制代码
// 获取当前URL
var currentUrl = window.location.href;
 
// 解析当前URL的查询参数
var urlParts = currentUrl.split('?');
 
// 如果URL已有查询参数,则添加新参数,否则创建新的查询字符串
var newQueryParams = 'param1=value1&param2=value2';
if (urlParts.length > 1) {
    urlParts[1] += '&' + newQueryParams;
} else {
    urlParts.push(newQueryParams);
}
 
// 创建新的URL
var newUrl = urlParts.join('?');
 
// 使用pushState更新浏览器历史记录
window.history.pushState({ path: newUrl }, '', newUrl);
 
// 现在URL已经更新,但页面不会刷新或跳转

请注意,这种方法不会向服务器发送任何请求,也不会导致页面内容改变。它只是在浏览器的历史记录中添加了一个新的记录,并更新了当前的URL。

其他文章:
History 对象的pushState()和replaceState()

相关推荐
普郎特12 分钟前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
侃侃_天下33 分钟前
最终的信号类
开发语言·c++·算法
一枚前端小能手43 分钟前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码43 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
鹏多多1 小时前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
uhakadotcom1 小时前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
echoarts1 小时前
Rayon Rust中的数据并行库入门教程
开发语言·其他·算法·rust
Mintopia1 小时前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc
2503_928411561 小时前
9.15 ES6-变量-常量-块级作用域-解构赋值-箭头函数
前端·javascript·es6
Mintopia1 小时前
Next.js 单元测试究竟该选 JTest 还是 Vitest?
前端·javascript·next.js