React 前端导航

history的pushState和replaceState API 用法及使用场景

API作用

pushState和replaceState是JavaScript中的两个方法,用于修改浏览器的历史记录。pushState方法可以在不重新加载页面的情况下,向浏览器历史记录堆栈中添加一个新的记录,同时改变当前的URL。而replaceState方法则可以修改当前历史记录堆栈中的当前记录,但不会添加新的记录。这两个方法都可以用来控制浏览器历史记录,但使用场景不同。

参数介绍

pushState(state, unused, url)与replaceState(state, unused, url)都有三个参数:

  • state:state 对象可以是任何可以序列化的对象,是与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数,也可以通过history.state 直接访问。如果不需要这个对象,此处可以填null。因为 Firefox 将 state 对象保存到用户的磁盘上,以便用户重启浏览器可以恢复,所以 state 对象序列化的表示施加了 16 MiB 的限制。如果传递的 state 对象的序列化表示超出了 pushState() 可接受的大小,该方法将抛出异常。
  • unused:由于历史原因,该参数存在且不能忽略;传递一个空字符串是安全的,以防将来对该方法进行更改。
  • url:网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

需要注意的是,使用pushState或replaceState修改URL时,需要保证修改后的URL是有效的。否则,会导致页面无法被找到或不可访问。

使用场景

  • SPA(单页面应用):当单页面应用切换页面时,通过pushState或replaceState修改URL,这样就可以方便地保持当前页面的状态,并可以通过浏览器的前进和后退按钮进行导航。
  • MPA(多页面应用)页面跳转:在跳转页面时,可以使用pushState或replaceState将新的页面URL添加到浏览器的历史记录中,这样用户在点击浏览器的前进和后退按钮时可以快速回到之前跳转的页面。

声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。邮箱:farmerlzj@163.com。 本站原创内容未经允许不得转载,或转载时需注明出处: 内容转载自: React前端网:https://qianduan.shop/blogs/detail/129

#history#pushState#replaceState