不刷新页面修改url地址方法

最新推荐文章于 2023-12-29 11:49:46 发布

马码码1997

最新推荐文章于 2023-12-29 11:49:46 发布

阅读量2k

点赞数

分类专栏：前端笔记文章标签： javascript html html5 前端

本文链接：https://blog.csdn.net/weixin_44866262/article/details/120650521

版权

笔记同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

前端

18 篇文章 0 订阅

订阅专栏

不刷新页面修改url地址方法

利用HTML5的history.replacestate() 修改当前页面的URL
但是修改的url不能跨域（用于替换掉的URL必须是同域的）

history.pushState(state, title, url);

state：状态对象是一个JavaScript对象，它与pushState()创建的新历史记录条目相关联。每当用户导航到新状态时，都会触发popstate事件，并且该事件的状态属性包含历史记录条目的状态对象的副本。
title：当前大多数浏览器都忽略此参数，尽管将来可能会使用它。在此处传递空字符串应该可以防止将来对方法的更改。
url 可选：新历史记录条目的URL由此参数指定。注意，浏览器不会在调用pushState() 之后尝试加载此URL，但可能会稍后尝试加载URL，例如在用户重新启动浏览器之后, 新的URL不必是绝对的。如果是相对的，则相对于当前URL进行解析。新网址必须与当前网址同域，否则pushState()将引发异常。如果未指定此参数，则将其设置为文档的当前URL。

   // console.log(window.location.href)
  // console.log(history)
 // let url = 'http://localhost:3000/pages/DataPermission/Modules.html'
 window.history.replaceState( null, null, url);