uni-app H5 从首页跳转到对应页面，再次跳转后浏览器返回按钮置灰了

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app H5 从首页跳转到对应页面，再次跳转后浏览器返回按钮置灰了

示例代码：

<template>
  <view>
    <page>
      <view>
        <text>index.vue</text>
        <code>
          setTimeout(() => {  
            uni.navigateTo({ url: "/pages/test/test" });  
          }, 1500);  
        </code>
      </view>
      <view>
        <text>test.vue</text>
        <code>
          onReady() {  
            setTimeout(() => {  
              uni.navigateTo({ url: "/pages/test2/test2" });  
            }, 1500);  
          }
        </code>
      </view>
    </page>
  </view>
</template>

操作步骤：

  1. 首页再onready进行跳转
  2. 在二级页面在进行跳转

预期结果：

浏览器左上角返回按钮不置灰，并且手势可以返回上一页面

实际结果：

置灰了

bug描述：

从首页跳转到2级页面，再跳转到三级页面，浏览器就按钮置灰，项目需求是webview载体，这样跳转手势就返回不了上一页面，而是关闭webview了

附件

testCode.zip

开发环境 版本号 项目创建方式
Windows 10.0.19045 HBuilderX
浏览器 Edge 129.0.2792.89 -

Harmonyos Next教程
4 回复

请上传相关截图视频、以及测试工程


已经上传测试工程

@BoredApe -

在uni-app中，处理H5页面跳转时浏览器返回按钮置灰的问题，通常与页面的路由管理和生命周期有关。在H5环境中，页面的前进和后退操作依赖于浏览器的历史记录（History API）。如果页面的跳转没有正确管理历史记录，就可能导致返回按钮不可用。

以下是一个基本的示例，展示如何在uni-app中正确管理页面跳转，确保浏览器返回按钮正常工作。

1. 使用navigateTo进行页面跳转

在uni-app中，推荐使用navigateTo方法进行页面跳转，因为它会在历史记录中添加一个新条目，允许用户通过浏览器的返回按钮返回到前一个页面。

首页（index.vue）代码示例：

<template>
  <view>
    <button @click="navigateToPage">跳转到对应页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToPage() {
      uni.navigateTo({
        url: '/pages/targetPage/targetPage'
      });
    }
  }
}
</script>

2. 目标页面（targetPage.vue）代码示例

在目标页面中，你可以进行进一步的操作，或者仅仅是展示一些内容。重要的是，不要在目标页面中调用可能导致历史记录异常的方法，如redirectTo（它会替换当前的历史记录条目）。

<template>
  <view>
    <text>这是目标页面</text>
    <!-- 你可以在这里添加其他内容或按钮 -->
  </view>
</template>

<script>
export default {
  // 这里可以定义页面的数据和方法
}
</script>

3. 确保正确返回

当用户点击浏览器的返回按钮时，uni-app应该自动处理返回操作，前提是历史记录被正确管理。如果在目标页面或任何中间页面调用了redirectTo或未正确管理历史记录，可能会导致返回按钮置灰。

4. 避免使用redirectTo

如前所述，redirectTo方法会替换当前的历史记录条目，因此在需要保留返回路径的情况下应避免使用。

总结

通过上述方式，使用navigateTo进行页面跳转，并确保不在跳转过程中调用会修改历史记录条目的方法（如redirectTo），可以有效避免浏览器返回按钮置灰的问题。如果问题依然存在，建议检查是否有其他脚本或插件干扰了浏览器的历史记录管理。

回到顶部