怎么在HTML5中实现无刷新修改URL

window.location.href,拼接一个搜索的关键值,点击搜索的同时,刷新了页面,URL改变了,功能是实现了,可是虫来了……,搜索页面闪烁后才进入结果页,而结合不跳转页面就不会发生闪烁的情况,所以当页面刷新时,vue实例都会被重新加载。

window.location.hash, URL中#为网页中的一个位置,当读取此URL时,页面会自动滚动到锚点处。这种方法不会向服务器发送请求,也不会重载页面。可读写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。

<强>新增API

百度后发现HTML5为<代码> window.history> history.pushState() 和<代码> history.replaceState() 方法,它们分别可以添加和修改历史记录条目。这些方法通常与<代码> window.onpopstate 事件配合使用。两种API都能改变当前的URL,不同的是,pushState在浏览器中创建一条新的历史记录,而<代码>历史。replaceState仅仅替换当前地址为指定url。

HTML5 新增的历史记录 API 均可以实现无刷新更改地址栏链接，配合 AJAX 完全可以做到无刷新跳转。他们的作用非常大，可以做到改变网址却不需要刷新页面，这个特性后来用到了单页面应用中比如：vue-router，react-router-dom里面。那么下面介绍新API的使用方法

pushState方法

上面提到的这套 API 提供一种「人为操纵」浏览器历史记录的方法。

我们可以将浏览器历史记录可以看作一个「栈」。栈是一种后进先出的结构，可以把它想象成一摞盘子，用户每点开一个新网页，都会在上面加一个新盘子，叫「入栈」。用户每次点击「后退」按钮都会取走最上面的那个盘子，叫做「出栈」。而每次浏览器显示的自然是最顶端的盘子的内容。

语法: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/，但同时浏览器不会刷新页面，甚至不会检测目标页面是否存在。

replaceState方法

有时，你希望不添加一个新记录，而是替换当前的记录，俩者区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。

replaceState和pushState原理一样使用也一样,最常用的方法：

window.history.replaceState({id: 1,name: "profile"},'下载','download?id=1');

特点：replaceState不会加入到历史记录里面,用history.go(-1)会跳过当前页面相当于是history.go(-2)。

popstate事件

当页面加载时，它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载，页面将收到onload事件，但不会有popstate事件。然而，如果你读取history.州属性,将在popstate事件发生后得到这个国家对象