页面返回事件 v1.4.8+

注意

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

使用 onBeforeBack

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

router5.vue

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

好处如下:

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

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

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

原始的 onBackPress

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

兼容其他端写法：

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

  • 原型挂载方法，最后还是在 onBackPress及onBeforeBack 中调用此方法。