uni-app 等待导航至 /pages/home/home 时，请勿连续操作 /pages/home/home

uni-app 等待导航至 /pages/home/home 时，请勿连续操作 /pages/home/home

操作步骤：

无

预期结果：

无

实际结果：

无

bug描述：

uni.redirectTo({
url: '/pages/home/home'
});
页面没有跳转，重复点击后提示：
Waiting to navigate to: /pages/home/home, do not operate continuously: /pages/home/home.
```

| 信息类别       | 信息内容         |
|----------------|------------------|
| 产品分类       | uniapp/App       |
| PC开发环境     | Windows          |
| PC开发环境版本 | windows11        |
| HBuilderX类型  | 正式             |
| HBuilderX版本  | 3.99             |
| 手机系统       | Android          |
| 手机系统版本   | Android 10       |
| 手机厂商       | 手持设备         |
| 手机机型       | BJ6005           |
| 页面类型       | nvue             |
| Vue版本        | vue3             |
| 打包方式       | 云端             |
| 项目创建方式   | HBuilderX        |

更多关于uni-app 等待导航至 /pages/home/home 时，请勿连续操作 /pages/home/home的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

/pages/home/home 是tabbar界面么？

更多关于uni-app 等待导航至 /pages/home/home 时，请勿连续操作 /pages/home/home的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不是，app没有tabbar，在真机运行，点了以后不跳转，修改了页面任意地方保存以后，页面就进到/pages/home/home。

要么URL地址错，要么就就是如楼上说的，home是tabbar里的页面。

不是tabbar，没有设置tabbar

之前因为在短时间内跳转不同界面也出现过这个问题，我限制跳转条件之后就没了

我这是个登录页面，进入APP后第一个界面就是登录，登录成功以后，需要跳转到home页面，但是点了登录以后，跳转死活都不执行

解决了，把基座卸载了，然后重新打包自定义基座，重新安装后就正常了，哎

我也要遇到这个问题但是我是 tabbar 页面

uni.switchTab

我也出现这个情况，是在部份机型可以，部分机型不可以

在 uni-app 中，如果你希望在导航到一个页面时避免用户连续操作（例如重复点击按钮导致多次跳转），你可以通过以下几种方式来实现：

1. 使用 uni.navigateTo 的 success 或 complete 回调

你可以在 uni.navigateTo 的 success 或 complete 回调中禁用按钮，直到导航完成后再启用。

methods: {
  navigateToHome() {
    // 禁用按钮
    this.isButtonDisabled = true;

    uni.navigateTo({
      url: '/pages/home/home',
      success: () => {
        console.log('导航成功');
      },
      complete: () => {
        // 导航完成后重新启用按钮
        this.isButtonDisabled = false;
      }
    });
  }
}

在模板中，你可以根据 isButtonDisabled 的状态来控制按钮的禁用状态：

<button :disabled="isButtonDisabled" @click="navigateToHome">跳转到首页</button>

2. 使用全局状态管理（如 Vuex）

如果你在应用中使用了 Vuex，可以通过全局状态来管理导航状态。

// store.js
const store = new Vuex.Store({
  state: {
    isNavigating: false
  },
  mutations: {
    setNavigating(state, isNavigating) {
      state.isNavigating = isNavigating;
    }
  }
});

export default store;

然后在组件中使用：

methods: {
  navigateToHome() {
    if (this.$store.state.isNavigating) return;

    this.$store.commit('setNavigating', true);

    uni.navigateTo({
      url: '/pages/home/home',
      complete: () => {
        this.$store.commit('setNavigating', false);
      }
    });
  }
}

3. 使用防抖函数

你可以使用防抖函数来限制用户在一定时间内只能触发一次导航操作。

methods: {
  navigateToHome: debounce(function() {
    uni.navigateTo({
      url: '/pages/home/home'
    });
  }, 1000) // 1秒内只能触发一次
}

4. 使用 uni.showLoading 和 uni.hideLoading

在导航时显示加载动画，导航完成后隐藏动画，这样可以防止用户重复操作。

methods: {
  navigateToHome() {
    uni.showLoading({
      title: '加载中...',
      mask: true
    });

    uni.navigateTo({
      url: '/pages/home/home',
      complete: () => {
        uni.hideLoading();
      }
    });
  }
}
回到顶部