不刷新页面内容，改变浏览器访问地址url

2022-07-13 18:31:55 阅读：139 来源： 互联网

浏览器改变url

1 改变浏览器访问地址的方式

1-1 不刷新页面内容，改变浏览器访问地址url

1-1-1 query param

location.search = '?page=2';

1-1-2 hash

window.location.hash = 'www.zhihu.com'

如果原地址是 http://127.0.0.1/noliebe/template.html
运行 window.location.hash = 'www.zhihu.com' 后
url地址将变为 http://127.0.0.1/noliebe/template.html#www.zhihu.com

1-1-3 replaceState

window.history.replaceState(undefined, '', nU)
// 参数 nU 应该是历史记录实体的 URL. 新的 URL 跟当前的 URL 必须是同源; 否则 replaceState 抛出一个异常。

如果原地址是 http://127.0.0.1/noliebe/template.html

运行 window.history.replaceState(undefined, '', '/box') 后
url地址将变为 http://127.0.0.1/box
且不会从新地址重新加载页面，也不会留下访问记录
再举一个栗子
用户在 http://www/aaa 下点击了登录，跳转到了 http://www/login
login页面运行了 window.history.replaceState(undefined, '', '/box')
此时url地址是 http://www/box，但页面内容是 http://www/login 的内容
用户如果点击浏览器的返回按钮，url 地址将会是 http://www/aaa, 页面内容还是 http://www/login 的内容
只有主域 www 变了的时候，浏览器才会重新从超链接加载页面数据
参考 https://developer.mozilla.org/zh-CN/docs/Web/API/History/replaceState

1-1-3 pushState

window.history.pushState(undefined, '', nU)

pushState 大致同 replaceState, 但是会留下访问记录。
改一下之前的栗子
用户在 http://www/aaa 下点击了登录，跳转到了 http://www/login
login页面运行了 window.history.pushState(undefined, '', '/box')
此时url地址是 http://www/box，但页面内容是 http://www/login 的内容
用户如果点击浏览器的返回按钮，url 地址将会是 http://www/login, 页面内容还是 http://www/login 的内容
只有主域 www 变了的时候，浏览器才会重新从超链接加载页面数据
参考 https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

标签：www,http,url,地址,浏览器,login,页面
来源： https://www.cnblogs.com/noliebe/p/16475036.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9