当前位置: 首页 > Web前端 > vue.js

html5pushstate和监听浏览器返回事件

时间:2023-04-01 00:16:53 vue.js

pushstate和监听浏览器返回解决问题1、实际开发中,我们在A页面调用组件,在组件中填写内容。此时页面A在同一页面上。点击返回的时候,感觉回到了上一页,但是之前A页填的东西都没有了,很影响体验。因此,您可以使用pushstate方法更改url,而无需刷新浏览器。当你返回时,你会回到这个A页面,而不是之前的页面。但是这时候还需要监听返回按钮,进而控制组件的显示和隐藏。这也是至关重要的。否则,如果组件没有被隐藏,就相当于没有效果。pushState的使用方法(一般情况)functionpushHistory(){varstate={title:"title",url:"#"};window.history.pushState(state,"title","#");}参数说明:pushState()接受三个参数:state是一个js对象,title是一个标题(暂且忽略),以及一个可选的URL地址。关于pushstate的解释浏览器不会向服务器请求数据,而是直接改变url地址,可以类似理解为hash的变相版;但与hash不同的是,浏览器会记录pushState的历史,可以使用浏览器的前进,后退功能。监听浏览器的返回按钮window.addEventListener("popstate",function(e){console.log(e);alert("我监听了浏览器的返回按钮事件");//根据自己的需要实现你自己的函数},false);