vue 监听返回按钮

2020-09-27 09:21:30
移动端当用户使用默认返回按钮的时候，或左滑，或点击返回键

这时候需要监听返回按钮

1.挂载完成后，判断是否支持popstate

mounted(){
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);

window.addEventListener(‘popstate’, this.goBack, false);

}

2.页面销毁时，取消监听，否则其他vue路由页面也会被监听

destroyed(){
window.removeEventListener(‘popstate’, this.goBack, false);

3.将监听方法写到methods里面

methods:{
goBack(){
this.$router.replace({path: ‘/’});

//replace替换原路由，作用是避免回退死循环

}

vue 监听返回按钮相关推荐

微信公众号监听返回按钮问题解决
2017年12月21日微信公众号监听返回按钮问题解决 //首页返回路径 $(function(){pushHistory();var bool = false;setTimeout(function ...
【Android】ActionBar监听返回按钮
android生成的Activity默认是不显示ActionBar的,如果有需要可以把它打开,并且设置主副标题.返回键键等,重写onOptionsItemSelected才能点击返回键返回上一层 pu ...
document.referrer 配合微信监听返回按钮优化用户体验
document.referrer是javascript提供的默认返回并刷新页面的方法:同时用document.referrer可以获取到上一个页面的url; 那么具体如何使用呢? 举个列子:我们在做 ...
微信公众号监听返回按钮关闭当前界面，部分安卓机监听popstate失败【小程序与公众号】
需求: 微信公众号开发的时候,可能会出现这种需求: 微信公众号内指定某个网页在点击返回键时不回退到上一级,而是直接关闭微信浏览器窗口,用户点击返回按钮本身就是一个返回事件. 解决方案: 利用监听返回事 ...
mui框架下监听返回按钮
用于监听mui框架下的Android手机的返回按键(物理键) 1 mui.back = function() { 2 if(b == true) {//一个标识符,在某个状态下不允许双击返回关闭程序 ...
ionic4监听返回事件 AppMinimize navController
1:引入Platform.ToastController. Nav. NavController import { Platform, ToastController, Nav, NavControl ...
mui+vue监听安卓手机返回键
1.引入mui之后,在index.html中初始化mui,可以不设置keyEventBind,默认监听back,menu键 <script src=&qu ...
Vue监听浏览器前进后退物理返回键(浏览器自带的)
Vue监听浏览器前进后退物理返回键在某些需求下要监听用户物理按键. popstate事件只会在页面不跳转的情况下,路由发生变化触发. created() { // 创建vm实例后执行// 浏览器控制 ...
Vue 点浏览器后退模态框有灰色遮罩，监听返回键 this 无效
问题:前端使用 <el-dialog 实现模态框当打开模态框后,点击浏览器上的后退按钮,发现遮罩还在. 解决办法监听返回键,遇到的问题是直接用 this.xxx 无效,原因是此处 this 非 ...

vue 监听返回按钮

vue 监听返回按钮相关推荐

最新文章

热门文章