vue和安卓交互点击返回退出APP时先弹出"Tekani"提示,第二次点击返回才退出APP
时间: 2024-05-02 16:18:11 浏览: 161
在Vue中,可以监听路由的变化,从而实现在点击返回时先弹出提示,第二次点击才退出APP的功能。
1. 在App.vue中添加监听路由变化的方法:
```
methods: {
onBackButton() {
if (this.$route.path !== '/home') {
this.$router.go(-1)
} else {
if (this.showExitConfirm) {
navigator.app.exitApp()
} else {
this.showExitConfirm = true
this.$toast('再按一次退出Tekani')
setTimeout(() => {
this.showExitConfirm = false
}, 2000)
}
}
}
},
```
2. 在mounted钩子函数中添加返回键的监听:
```
mounted() {
document.addEventListener('backbutton', this.onBackButton, false)
},
```
3. 在beforeDestroy钩子函数中移除返回键的监听:
```
beforeDestroy() {
document.removeEventListener('backbutton', this.onBackButton, false)
},
```
这样,在页面上点击返回键时,如果当前路由不是首页,就直接返回上一级路由;如果当前路由是首页,就弹出提示,再次点击才退出APP。
阅读全文