Javascript 如何在不重新加载/重新定位页面的情况下单击按钮时在URL中添加值

在这种情况下，我只想在我的url的末尾加上

id

的值

不管怎样，我刚刚找到了解决办法

我想在url中添加值

我当前的网址是

localhost:1000//settings/tab=contact-types

假设我有这个函数

function view(id){ #lets say the value of id is 1
    localhost:1000//settings/tab=contact-types/1  #i want the current url look like this   
}

我在表格的每一行都有一个按钮，当我单击它时，它将运行

view（）

函数并显示查看模式

我希望在url中添加我的参数的特定值，而无需重新加载/重新定位页面

谢谢 请测试此代码

导出默认值{
安装的（）{
此.updateURLQuery（“选项卡”、“报告”）
},
方法：{
updateURLQuery（查询，值）{
const componentLocation=window.location.pathname；
这是$router.push({
路径：组件位置，
查询：{
[查询]：值，
},
});
},
}
}

您可以通过使用历史api来实现这一点

function view(id){ 
// lets say the value of id is 1
// localhost:1000//settings/tab=contact-types/1  #i want the current url look like this  
// get the current url
const oldUrl = location.href;
// get append the id to the url
const newUrl = oldUrl + '/' + id;
// update the url of the page
history.replaceState({}, '', newUrl);
}

---

阅读有关历史推送的更多信息

我只需在函数中使用此代码即可找到解决方案

view: function(id)
{
    var newurl = window.location.href +"/"+id
    window.history.pushState({path:newurl},'',newurl);
}

window.location.href

定义我的当前url

我只需在当前url的末尾输入

id

的值，并使用

window.history.pushState({path:newurl},'',newurl); 

将其推送到url中

---

谢谢 我想你需要的是pushState（）：

---

将上面的行放入

视图

函数中。更多信息请查看：

可能重复的可能重复的感谢，我也找到了答案，顺便说一句，我们有相同的逻辑。谢谢兄弟！是 啊但是推送和替换是有区别的。pushState将在导航历史记录中创建一个新条目，而replaceState将替换当前实体。这似乎是你想要的@如果您使用的是vue.js和vue路由器，那么这个解决方案就不是很好。因为您可以使用vue-router实用程序来更新URL。

window.history.pushState("state obj or string", "your title", id);