uni-app中在app.vue中使用uni.reLaunch会使打开的页面的onReady方法执行2次

uni-app中在app.vue中使用uni.reLaunch会使打开的页面的onReady方法执行2次 我在app.vue中的onLaunch做了判断是否登录，如果已经登录则跳转到a页面 如未登录则跳转到登录页

跳转的方法使用的是uni.reLaunch
现在发现在打开的a页面中onReady被执行了2次 代码在附件中 已知pages.json中a页面只存在一个配置

感觉像是这个a页面被加载了2次这样导致我在这个页面嵌入的子组件中mounted方法调用接口也执行了2次

尝试在跳转到a页面的时候做了个延时3秒，刷新 页面后马上会打开a页面然后过3秒因执行reLaunch又刷了遍

附件

文件名 链接
test.zip test.zip


更多关于uni-app中在app.vue中使用uni.reLaunch会使打开的页面的onReady方法执行2次的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

pages.json配置的第一页面是 a 页面吗，第一个页面就是默认启动页面，或者是否配置了启动页

更多关于uni-app中在app.vue中使用uni.reLaunch会使打开的页面的onReady方法执行2次的实战教程也可以访问 https://www.itying.com/category-93-b0.html


pages.json pages配置的第一个是登录页，mainfest.json quckapp启动页也没配置任何东西 我写个出问题的demo在附件里

回复 y***@yousi.com: 是h5还是app

回复 JXWang: H5 app（调试基座）里都有发现

回复 JXWang: 我刚发现首次编译后启动不会有问题，但开发改代码自动刷新 页面后就会这样

回复 JXWang: 如果是h5的话，当登录成功之后跳转到a页面，然后刷新整个页面的话还停留在a页面，所以此时先进入a页面，然后再到app.vue的onLaunch又执行了一次跳转到a页面，所以a页面进入了两次。解决方法登录成功后判断当前路由是否是a页面，如果是a页面就不跳转

回复 y***@yousi.com: 就是因为改代码自动刷新刷新后启动的页面还是当前a页面，然后app.vue的onLaunch又跳转了一次，然后就出现进入两次的情况

回复 JXWang: 好的，谢谢~

在 uni-app 中，如果你在 App.vue 中使用 uni.reLaunch 方法，可能会导致打开的页面的 onReady 生命周期方法被执行两次。这是因为 uni.reLaunch 会关闭所有页面并重新加载目标页面，而在某些情况下，页面的生命周期可能会被重复触发。

可能的原因

  1. 页面重新加载：uni.reLaunch 会关闭所有页面并重新加载目标页面，这可能会导致页面的生命周期方法被重新执行。
  2. 页面栈的变化：uni.reLaunch 会清空页面栈并重新加载页面，这可能会导致页面的生命周期方法被重复触发。

解决方案

为了避免 onReady 方法被重复执行，你可以采取以下几种方法：

  1. 避免在 App.vue 中使用 uni.reLaunch：

    • 如果你在 App.vue 的 onLaunch 或 onShow 方法中使用 uni.reLaunch，考虑将跳转逻辑移到具体页面的生命周期方法中，或者在合适的时机调用 uni.reLaunch。

  2. 使用标志位控制：

    • 你可以在页面中使用一个标志位来确保 onReady 方法只执行一次。
    export default {
  data() {
    return {
      isReady: false
    };
  },
  onReady() {
    if (!this.isReady) {
      this.isReady = true;
      // 你的初始化逻辑
    }
  }
};

  3. 使用 onLoad 代替 onReady：

    • 如果可能的话，将初始化逻辑放在 onLoad 方法中，因为 onLoad 只在页面加载时执行一次。
    export default {
  onLoad() {
    // 你的初始化逻辑
  }
};

  4. 检查 uni.reLaunch 的调用时机：

    • 确保 uni.reLaunch 在合适的时机调用，避免在页面生命周期方法中重复调用它。

示例代码

以下是一个使用标志位控制的示例：

// App.vue
export default {
  onLaunch() {
    // 在合适的时机调用 uni.reLaunch
    uni.reLaunch({
      url: '/pages/index/index'
    });
  }
};

// pages/index/index.vue
export default {
  data() {
    return {
      isReady: false
    };
  },
  onReady() {
    if (!this.isReady) {
      this.isReady = true;
      // 你的初始化逻辑
      console.log('onReady 执行一次');
    }
  }
};
回到顶部