空 | location.href = url | location.reload() | location.replace(url) |
---|---|---|---|
url完全不变的情况下 | 刷新Docment,不会产生记录 | 刷新Docment,不会产生记录 | 刷新Docment,不会产生记录 |
只改变hash | 不会刷新Docment,会在浏览器产生记录,但是如果连续改变hash,也会丢失记录 是 | 空 | 不刷新Docment 也不产生记录 |
改变url,只hash不算,hash从有到无算 | 刷新Document,会产生记录,但是如果页面加载时执行不会产生记录,setTimeout里面执行就会有记录 | 空 | 刷新Document,不会产生记录 |
问题1:
在页面加载的时候直接location.href 到其他的页面,会在浏览器里不留下当前页面的记录,
试验用 setTimeout 0秒后再location.href 到其他的页面则会留下记录。
所以再做页面跳转的时候如果不想留下记录,还是用replace比较保险,如果想留下记录,应该setTimeout几百毫秒再跳转。
问题2:
通过浏览器的前进和后退到页面,页面的Document会从缓存中取,js重新执行。所以如果页面的数据是从模板中下发的,
会导致回退回来的时候页面的模板数据不会刷新。
解决方案
var url = window.location.href;
var ps = url.split("#");
try{
if(ps[1] != 1){
url += "#1";
}else{
//当访问页面的时候是有hash =1 证明是从别的url中过来的,所以replace成没有hash的url(这里就会刷新Document)
window.location.replace(ps[0]);
return;
}
}catch(ex){
url += "#1";
}
//页面第一次进来的时候,没有hash = 1,用replace加上hash,这样在跳转到其他页面再返回来的时候是带着hash
window.location.replace(url);
问题3:
页面中当连续改变hash的时候,也会导致浏览器的历史记录会有丢失,所以快速切换hash也有问题。
但是有的需求是当进入页面的时候需要立刻变成hash2,然后可以点击返回到hash1,
如果从页面中直接从hash1变成hash2会发现hash1的记录消失。
解决办法 先用history.pushState 给浏览器添加一条记录,然后用replace (hash2)的方法替换掉添加的记录,这样记录里存的就是hash1和hash2
解决方案
history.pushState({},document.title, '#/order')
this.$router.replace({
name: 'Edit'
})
如果觉得有收获请关注微信公众号 前端良文 每周都会分享前端开发中的干货知识点。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。