页面跳转与浏览器记录

learn_shifeng 发布于2019-08-20 19:07 / 897人阅读

摘要：所以再做页面跳转的时候如果不想留下记录，还是用比较保险，如果想留下记录，应该几百毫秒再跳转。解决办法先用给浏览器添加一条记录，然后用的方法替换掉添加的记录，这样记录里存的就是和解决方案

空	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"
})

服务器托管云服务器页面跳转 jsp不跳转页面跳转删除页面记录跳转javaee页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85165.html

【Amaple教程】2. 模块

摘要：模块更新时部分不需被替换的模块，检测到或参数变化增加移除或修改参数时触发，如所有页面的部分总是不变，此时它将不会被替换。模块函数将在模板指令与状态数据中讲解继续学习下一节教程模板指令与状态数据也可回顾上一节教程启动路由正如它的名字，模块用于amaplejs单页应用的页面分割，所有的跳转更新和代码编写都是以模块为单位的。定义一个模块一个模块由标签对包含，内部分为template模板...

weizx 2019-08-01 18:27 评论0 收藏0
【Amaple教程】2. 模块

摘要：模块更新时部分不需被替换的模块，检测到或参数变化增加移除或修改参数时触发，如所有页面的部分总是不变，此时它将不会被替换。模块函数将在模板指令与状态数据中讲解继续学习下一节教程模板指令与状态数据也可回顾上一节教程启动路由正如它的名字，模块用于amaplejs单页应用的页面分割，所有的跳转更新和代码编写都是以模块为单位的。定义一个模块一个模块由标签对包含，内部分为template模板...

付伦 2019-08-22 13:59 评论0 收藏0
【Amaple教程】2. 模块

摘要：模块更新时部分不需被替换的模块，检测到或参数变化增加移除或修改参数时触发，如所有页面的部分总是不变，此时它将不会被替换。模块函数将在模板指令与状态数据中讲解继续学习下一节教程模板指令与状态数据也可回顾上一节教程启动路由正如它的名字，模块用于amaplejs单页应用的页面分割，所有的跳转更新和代码编写都是以模块为单位的。定义一个模块一个模块由标签对包含，内部分为template模板...

OBKoro1 2019-08-29 14:19 评论0 收藏0
微信小程序mpvue框架总结

摘要：原理架构作为与之间相互通信的桥梁部分在环境中注入的实现代码，包含了协议的拼装发送参数池回调池等一些基础功能。部分在客户端中的功能映射代码，实现了拦截与解析环境信息的注入通用功能映射等功能。原理架构 JSBridge 作为native 与 JS 之间相互通信的桥梁JS部分(bridge): 在JS环境中注入 bridge 的实现代码，包含了协议的拼装/发送/参数池/回调池等一些基础功能...

microelec 2019-08-23 18:32 评论0 收藏0