vue+js监听浏览器返回

2022-08-01 14:32:25 阅读：143 来源： 互联网

标签：历史记录 vue 浏览器 goBack js window go false history

页面添加监听

mounted () {
    if (window.history && window.history.pushState) {
        // 向历史记录中插入了当前页
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);
    }
},
destroyed () {
    window.removeEventListener('popstate', this.goBack, false);
},
methods: {
    goBack () {
        // console.log("点击了浏览器的返回按钮");
        sessionStorage.clear();
        window.history.back();
    },
} 
因为这个页面有跳转其他页面的路由，所以在组件的路由钩子里也清了缓存

beforeRouteLeave (to, from , next) {
    sessionStorage.clear();
    next()
},
禁用返回

mounted () {
    if (window.history && window.history.pushState) {
        // 向历史记录中插入了当前页
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);
    }
},
destroyed () {
    window.removeEventListener('popstate', this.goBack, false);
},
methods: {
    goBack () {
        // console.log("点击了浏览器的返回按钮");
        history.pushState(null, null, document.URL);
    },
} 
history对象
window可以省略，直接使用history
1、window.history.back() : 后退
2、window.history.forward() : 前进
3、window.history.go(num) : 前进或后退指定数量历史记录

window.history.go(1)
前进
window.history.go(-1)
后退
window.history.go(0)
刷新

4、window.history.pushState(state, title, url)
存储当前历史记录点

state：一个对象，可以添加相关信息
title：历史记录的标题
url：创建的历史记录的链接

5、window.history.replaceState(state, title, url)
替换当前历史记录点

6、popstate
history 实体改变时触发的事件，监听历史记录点

7、window.history.state
获取 history 实体中的 state 对象

history.go(0) 和 location.reload() 的区别

一、location.reload()
默认参数为false，即location.reload(false)

1、location.reload(false):
会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变
如果文档已改变，从服务端再次下载该文档
如果文档未改变，从缓存中装载文档
作用等同于点击浏览器的刷新按钮 (F5)

2、location.reload(true):
绕过缓存，从服务器上重新下载该文档
作用等同于点击浏览器的刷新按钮，同时按住Shift (Shift+F5)

二、history.go(0)
直接读取缓存数据，不会从服务器端获取数据

history.go(-1) 和 history.back() 的区别

一、history.go(-1)
后退并刷新，原页面表单中的内容会丢失
二、history.back()
后退，原页面表单中的内容会保留

标签：历史记录,vue,浏览器,goBack,js,window,go,false,history
来源： https://www.cnblogs.com/wasbg/p/16540175.html

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

ICode9

vue+js监听浏览器返回