最近遇到一个需求，需要在微信浏览器中通过点击按钮修改URL中的参数并且不刷新页面，再通过微信右上角打开本地浏览器，跳转到修改后的URL，查阅资料后总结了以下几个方法。
一、location.hash
location.hash的写法
在路由hash模式下可以使用此方法修改URL中的参数
// 替换url中的参数
const arr = location.hash.split('?')
location.hash = arr[0] + '?a=1'
// 增加url中的参数
location.hash = location.hash + '&a=1'
location.hash的应用
1、用户可以用它来跳转页面的指定的位置，让用户更加方便快捷的使用页面，减少用户的页面跳转查找时间。
2、它也用于改变页面内容，并不会触发页面刷新作为开发者，可以利用它实现页面内容的“单页面”切换，即不用跳转页面，改变页面内容，提高用户体验。
3、它还可以作为一种页面控制参数，用来控制前端页面，也可以帮助SEO收录，使用它可以把不同的内容区分开来，有利于页面的收录。
二、history.pushState
// 语法
window.history.pushState(state, title, url)
执行pushState函数之后，会往浏览器的历史记录中创建一条新记录，同时改变地址栏的地址内容。它可以接收三个参数，按语法顺序分别为：
- 一个state对象或者字符串，用于描述新记录的一些特性。这个参数会被一并添加到历史记录中，以供以后使用。这个参数是开发者根据自己的需要自由给出的。该值是后期可以通过history.state;获取当前页面的参数,
- 一个字符串，代表新页面的标题。当前基本上所有浏览器都会忽略这个参数。
- 一个字符串，代表新页面的相对地址。（必须与当前页面处在同一个域。）
简单例子：假设当前页面为renfei.org/，打开控制台执行下面的 JavaScript 语句：
window.history.pushState({id: 1,name: "profile1"}, "My Profile", "/profile/") //第一二参数可忽略设置为null
之后，地址栏的地址就会变成renfei.org/profile/，但同时浏览器不会刷新页面，甚至不会检测目标页面是否存在。
// 路由为history模式
window.history.pushState(null, null, location.pathname + "?a=1")
// 路由为hash模式
const arr = location.hash.split('?')
window.history.pushState(null, null, arr[0] + "?a=1")
通过如上写法，可在地址栏替换参数
三、history.pushState
有时，你希望不添加一个新记录，而是替换当前的记录，pushState()和replaceState()的区别在于，replaceState()是修改了当前的历史记录项而不是新建一个。
// 语法
window.history.replaceState({id: 1,name: "profile1"}, "My Profile", "/profile/") //第一二参数可忽略设置为null
