首页 > 技术文章 > pushState,replaceState无刷新改变url

juewuzhe 2020-05-08 16:56 原文

pushState和replaceState可以做到改变网址却不需要刷新页面。

1. pushState

说明:浏览器会记录pushState的历史记录,可以使用浏览器的前进、后退功能作用,可以使用history.go(-1)返回到上一个页面

使用方法:window.history.pushState(state, title, url)

参数说明:

state: 一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null
title: 新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null
url: 新的网址,必须与当前页面处在同一个域,浏览器的地址栏将显示这个网址

 

2. replaceState

说明:replaceState仅仅是修改了对应的历史记录,replaceState不会加入到历史记录里面,用history.go(-1)会跳过当前页面相当于是history.go(-2)

使用方法:window.history.replaceState(state, title, url)

 

推荐阅读