# 页面返回事件 v1.4.8+

注意

在有带原生返回按钮的页面中使用 onBackPress 应更改为 onBeforeBack。相反则可以继续使用 onBackPress

# 使用 onBeforeBack

路由插件通过动态更改 onBackPress 生命钩子做到路由返回页面拦截的。早期版本是没有这样一个生命钩子的,所有的处理逻辑都放在全局路由守卫下。后来应广大 大佬 的要求,说这样有点麻烦,拿不到当前页面的数据 (其实很好拿,不是吗?)。OK!! 那咋们就给多加一个生命钩子嘛,莫问题的啦!注意:在有带原生返回按钮的页面 onBackPress 钩子会被重置为 onBeforeBack,所以你写 onBackPress 钩子是无效的。用或者更好! 为啥呢?看操作...

# router5.vue







 
 
 
 
 
 
 
 
 


export default {
    data() {
        return {

        };
    },
    onBeforeBack(args){
        return new Promise(resolve=>{
            setTimeout(()=>{
                resolve();
            },3000)
        })
        //or
        return true //阻止页面关闭
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 好处如下:

  1. 可返回 Promise,告诉路由插件需要异步处理这个钩子、resolve(true) 可以阻止关闭页面。

  2. 你还可以同步返回 true/false/undefined 返回 true 则阻止关闭。

  3. 按流程执行,先执行完 onBeforeBack 钩子、顺利通行 则执行全局守卫、后置守卫、最后结束。

# 原始的 onBackPress

在没有带原生返回按钮的页面中依旧使用 onBackPress!路由插件不会在这些页面注入 onBeforeBack 钩子函数。

# 兼容其他端写法:

  1. 使用js封装返回的方法,在 onBackPress及onBeforeBack都调用此方法。放心两者不会同时执行!

  2. 原型挂载方法,最后还是在 onBackPress及onBeforeBack 中调用此方法。