监听浏览器返回，可清除历史记录（移动端：手势返回）（vue）

问题：

我在写移动端的时候碰见了一个问题，有一个页面可以点击下一条，这样就会无限的跳转路由，此时就需要忘记路由记录，返回的时候回到跳进当前页面的页面。

解决：

起初，我直接使用的vue的router的replace，但因此又出现了问题，使用this.$router.replace时，路由记录的确没了，但在手机上使用手势导航返回，会出现无法返回，手势导航会根据replace跳转的次数，手势导航返回就要几次

因此，我监听了浏览器返回的事件，对返回事件触发时做处理就好了。

// 进入页面时保存当前页url
mounted() {if (window.history && window.history.pushState) {// 向历史记录中插入了当前页console.log('向历史记录中插入了当前页')history.pushState(null, null, document.URL)window.addEventListener('popstate', this.goBack, false)}},// 监听页面销毁destroyed() {console.log('离开当前页面')window.removeEventListener('popstate', this.goBack, false)},methods: {// 页面销毁时走这个方法goBack() {console.log('点击了浏览器的返回按钮')// 清缓存sessionStorage.clear()window.history.back()history.pushState(null, null, document.URL)},},beforeRouteLeave(to, from, next) {// 如果这个页面有跳转其他页面的路由，所以在组件的路由钩子里也需要清下缓存sessionStorage.clear()next()},

监听浏览器返回，可清除历史记录（移动端：手势返回）（vue）相关推荐

【webview】微信和PC监听浏览器关闭和刷新(亲测可用)
监听浏览器关闭和刷新前言 PC端微信端前言最近做的项目里有一个新的需求,在不同的浏览器内打开的网页,监听用户的操作,比如关闭浏览器,刷新浏览器等等. 这就涉及到了几个平台:PC端浏览器,移动端 ...
html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现
这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现,主要介绍了pushstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下 pushstate与监听浏览器 ...
h5监听浏览器返回，关闭浏览器
需求监听浏览器返回,点击返回时,显示弹窗,弹窗中有两个按钮,a按钮:关闭当前浏览器,b按钮:关闭弹窗 mounted(){// 向历史记录中插入了当前页,//为了ios首次进入页面出现底部返回按钮i ...
监听浏览器的返回事件，禁止浏览器返回
//禁止页面后退 history.pushState(null,null,document.URL); window.addEventListener('popstate',function(){// ...
【不得不看的几种js监听浏览器返回,关闭,刷新】
监听浏览器切换页面 //切换页面document.addEventListener('visibilitychange', function () { //浏览器切换事件if (document.vi ...
js监听浏览器返回、后退、上一页按钮事件方法
一.监听浏览器事件⼤家知道在页⾯中我们可以使⽤javascript window history,后退到前⾯页⾯,但是由于安全原因javascript不允许修改history ⾥已有的url链接,但 ...
Vue监听浏览器前进后退物理返回键(浏览器自带的)
Vue监听浏览器前进后退物理返回键在某些需求下要监听用户物理按键. popstate事件只会在页面不跳转的情况下,路由发生变化触发. created() { // 创建vm实例后执行// 浏览器控制 ...
popState 监听浏览器切换路由
浏览器内 popState 监听器使用在前端开发过程中,在一些业务场景中可能会遇到监听浏览器前进/后退.控制路由等情况.我们可以使用Web API提供的popState事件来处理这些情况,提到pop ...
js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge，Chrome和Firefox)
由于各浏览器兼容性不同,所以首先要先区分各浏览器 var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = use ...
linux输入数字切换浏览器tab,js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 --IT唐伯虎摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventList ...

监听浏览器返回，可清除历史记录（移动端：手势返回）（vue）

监听浏览器返回，可清除历史记录（移动端：手势返回）（vue）相关推荐

最新文章

热门文章