600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 监听浏览器返回 可清除历史记录(移动端:手势返回)(vue)

监听浏览器返回 可清除历史记录(移动端:手势返回)(vue)

时间:2019-06-19 12:45:41

相关推荐

监听浏览器返回 可清除历史记录(移动端:手势返回)(vue)

问题:

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

解决:

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

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

// 进入页面时保存当前页urlmounted() {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()},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。