uni-app 页面授权执行了路由back导致返回页面时触发了不该触发的钩子函数

开发环境	版本号	项目创建方式
Windows	Windows 10 21H2（64位）	CLI

产品分类：uniapp/H5

浏览器平台：微信内置浏览器
浏览器版本：8.0.23

CLI版本号：4.5.16

## 示例代码：
```javascript
onShow() {  
    // 所有授权完成后，刷新B页面，然后返回A页面会触发这个输出。在手机微信内置浏览器上操作的  
    console.log(this.$Route.path)  
    if (this.$Route.path === "/pages/pay/payCreate") {  
      this.initPayAuth()  
    }  
  },  
  methods: {  
    initPayAuth() {  
      this.type = Number(this.$Route.query.type)  
      // 获取链接中的授权code  
      const payCode = this.$Route.query.payCode  
      // 获取缓存中的授权code  
      const storagePayCode = getPayParams() || ""  
      if (!storagePayCode && !payCode && !this.isCancelPay) {  
        //  进行支付授权  
        if (isWechat()) {  
          getPayAuthCode()  
          return false  
        }  
      } else if (payCode) {  
        // 进行缓存  
        setPayParams(payCode)  
        this.$Router.back(2)  
      }  
    }  
  }

操作步骤：

使用uni-simple-router插件进行路由管理
A页面到B页面，B页面进行授权操作，携带B页面链接为返回URL，先跳转至公司服务端再跳转至银行授权，授权完成后，携带授权参数返回至B页面，这时把授权参数缓存到本地，然后执行this.$Router.back(2)，这时还在B页面，然后刷新B页面，返回A页面时会触发B页面onShow生命周期钩子函数，但是在B页面onSHow里面输出this.$Route.path时，值是A页面的path。

预期结果：

返回A页面时不触发B页面onShow

实际结果：

返回A页面时触发了B页面onShow



## bug描述：
使用uni-simple-router插件进行路由管理  
A页面到B页面，B页面进行授权操作，携带B页面链接为返回URL，先跳转至公司服务端再跳转至银行授权，授权完成后，携带授权参数返回至B页面，这时把授权参数缓存到本地，然后执行this.$Router.back(2)，这时还在B页面，然后刷新B页面，返回A页面时会触发B页面onShow生命周期钩子函数，但是在B页面onSHow里面输出this.$Route.path时，值是A页面的path。

caililin 1楼•11 天前

在 uni-app 中，如果你在页面授权后执行了 uni.navigateBack 返回上一个页面，可能会导致返回页面时触发一些不该触发的钩子函数（如 onShow、onLoad 等）。这种情况通常是因为页面生命周期钩子函数在页面显示时被自动触发。

解决方案

使用标志位控制逻辑 你可以在页面中设置一个标志位，用来控制某些逻辑是否执行。例如：

export default {
  data() {
    return {
      shouldExecuteLogic: true
    };
  },
  onShow() {
    if (this.shouldExecuteLogic) {
      // 执行你需要的逻辑
      console.log('onShow logic executed');
    }
    this.shouldExecuteLogic = true; // 重置标志位
  },
  methods: {
    navigateBack() {
      this.shouldExecuteLogic = false; // 在返回前设置标志位为 false
      uni.navigateBack();
    }
  }
};

在需要返回的地方调用 navigateBack 方法，而不是直接调用 uni.navigateBack。

使用 onHide 钩子 你可以在 onHide 钩子中设置一个标志位，然后在 onShow 中根据这个标志位来决定是否执行某些逻辑。

export default {
  data() {
    return {
      isPageHidden: false
    };
  },
  onShow() {
    if (this.isPageHidden) {
      // 执行你需要的逻辑
      console.log('onShow logic executed');
    }
    this.isPageHidden = false; // 重置标志位
  },
  onHide() {
    this.isPageHidden = true; // 页面隐藏时设置标志位
  }
};

使用 onBackPress 钩子 如果你希望在返回时执行一些逻辑，可以使用 onBackPress 钩子。这个钩子在页面返回时触发。

export default {
  onBackPress() {
    // 执行你需要的逻辑
    console.log('onBackPress logic executed');
    return false; // 返回 false 表示继续执行默认的返回行为
  }
};

使用 uni.$on 和 uni.$emit 进行事件通信 如果你需要在返回时传递一些数据或状态，可以使用 uni.$on 和 uni.$emit 进行事件通信。

// 在返回页面时触发事件
uni.$emit('pageReturned', { someData: 'data' });

// 在目标页面监听事件
uni.$on('pageReturned', (data) => {
  console.log('Page returned with data:', data);
});