vue3有一些变化,按照网上有些文章的方法,发现行不通,通过一段时间的打印、尝试后,发现以下方法可行。
第一步)首先定义一个处理回退事件的js函数,一定是vue.methods中的函数,否则找不到this,或者找不到router,其次,在mounted事件中将它映射成全局js函数;在此函数中判断是router.back还是退出Activity,通过返回值告诉Activity。
const app = Vue.createApp({
provide:{tags:tags, service:service},
created(){
this.$router.push('/home').catch(err => {err})
},
mounted() {
window.sys_go_back = this.sysGoBack;//声明全局函数,在Activity中调用
},
methods:{
sysGoBack() {
//实现按回退按钮回退历史页面,如果无历史,则退出activity或应用
//注意这里有变化,不能用this.$router.currentRoute.path
if(this.$router.currentRoute.value.path==="/home") {
return false;
}
this.$router.back();
return true;
}
}
});
第二步)在用了Webview的Activity中处理onBackPressed事件,调用全局的sys_go_back函数,如果返回true,则不做什么事情,否则执行Activity的回退。
@Override
public void onBackPressed () {
LOG.debug("onBackPressed");
if(webview == null) {
super.onBackPressed();
return;
}
//注意这里使用了CompletableFuture,所以至少需要用java 8
//使用CompletableFuture,可以解决很多Android中调用跟回调分离十万八千里的问题
jsGoBack().whenCompleteAsync((hasHistory, e) -> {
LOG.debug("sys_go_back return {}", hasHistory);
if(hasHistory) {
return;
}
runOnUiThread(super::onBackPressed);
});
}
/**
* 先判断vue中是否有历史可回退,如果有则执行vue的back,并返回true,否则直接返回false
* @return 是否存在可回退的历史页面
*/
private CompletableFuture<Boolean> jsGoBack() {
LOG.debug("Call vueGoBack");
CompletableFuture<Boolean> result = new CompletableFuture<>();
webview.evaluateJavascript("javascript:sys_go_back()", value -> {
LOG.debug("sys_go_back() return {}", value);
result.complete(ValParser.parseBool(value, false));
});
return result;
}