JS修改url地址参数但不刷新页面

url中带有数据id信息，现有个需求，可以变更数据id，同时要同步到浏览器URL中。具体代码如下：

URL= path?id=mmmm&name=xxx

 const url = window.location
              const pathName = url.pathname
              const locationSearch = url.search
              const searchArr = locationSearch.substring(1).split('&')
              searchArr[0] = `id=${this.formData.newProjectId}`
              const searchStr = `?${searchArr.join('&')}`
              const newUrl = url.origin + pathName + searchStr
              history.replaceState('', '', newUrl)

pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应

pushState()

history.pushState()方法向浏览器历史添加了一个状态(增加一个记录)。pushState()方法带有三个参数：一个状态对象、一个标题(现在被忽略了)以及一个可选的URL地址

history.pushState(state, title, url);

state object —— 状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。当用户定向到一个新的状态时，会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象，此处可以填null

title —— 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null

URL —— 这个参数提供了新历史纪录的地址。新URL必须和当前URL在同一个域，否则，pushState()将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL

replaceState(参数见上所述)

把当前的页面的历史记录替换掉

他们最大的特点是添加或替换历史记录后，浏览器地址栏会变成你传的地址，而页面并不会重新载入或跳转。

 

注： 详情参考https://blog.csdn.net/mmcrsx_blog/article/details/81124269