uni-app 夸克浏览器下uni.navigateBack()返回上一页出错 重复跳转-返回页面路径丢失白屏

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

uni-app 夸克浏览器下uni.navigateBack()返回上一页出错 重复跳转-返回页面路径丢失白屏

开发环境 版本号 项目创建方式
Windows win10 LTSC 21H2 CLI

示例代码：

示例代码：

首页代码

<template>  
  <view class="content">  
    <image class="logo" src="/static/logo.png"></image>  
    <view class="text-area">  
      <text class="title">{{ title }}</text>  
    </view>  
  </view>  
  <button @tap="routeToA">navigateTo 跳转到 Page A</button>  
</template>  

<script setup>  
const title = ref('首页')  
const routeToA = () => {  
  uni.navigateTo({  
    url: '/pages/page-a/page-a'  
  })  
}  
</script>

page-a 代码

<template>  
  <h1 style="text-align: center; height: 200rpx;">Page A</h1>  
  <button @tap="routeToB">navigateTo 跳转到 Page B</button>  
</template>  

<script setup>  
const routeToB = () => {  
  uni.navigateTo({  
    url: '/pages/page-b/page-b'  
  })  
}  
</script>

page-b 代码

<template>  
  <h1 style="text-align: center; height: 200rpx;">Page B</h1>  
  <button @tap="back">返回（navigateBack）</button>  
</template>  

<script setup>  
const back = () => {  
  // 返回上一页，期望返回 page-a，实际返回 index  
  uni.navigateBack()  
}  
</script>


# 操作步骤：

1. 在首页使用 uni.navigateTo 跳转到 Page A；
2. 在 Page A 使用 uni.navigateTo 跳转到 Page B；
3. 在 Page B 使用 uni.navigateBack() 返回；

预期结果：

从 Page B 页面返回到 Page A


# 实际结果：

返回到了首页，重复操作偶尔正常返回，最后页面丢失白屏

Harmonyos Next教程
2 回复

坏了，夸克浏览器里面 uni.navigateBack() 返回页面好多都有问题，难搞哦


在uni-app开发中，针对夸克浏览器下uni.navigateBack()返回上一页出错、重复跳转、返回页面路径丢失导致白屏的问题，这通常是由于浏览器对页面栈的管理差异或者页面跳转逻辑处理不当引起的。下面提供一些可能的解决方案，通过代码示例来展示如何更稳健地处理页面跳转和返回。

1. 使用全局变量记录页面栈

可以通过一个全局变量（比如Vuex状态管理）来手动管理页面栈，确保在任何情况下都能正确导航。

// store.js (Vuex示例)
const store = new Vuex.Store({
  state: {
    pageStack: []
  },
  mutations: {
    PUSH_PAGE(state, pagePath) {
      state.pageStack.push(pagePath);
    },
    POP_PAGE(state) {
      state.pageStack.pop();
    }
  },
  actions: {
    navigateTo({ commit }, pagePath) {
      commit('PUSH_PAGE', pagePath);
      uni.navigateTo({ url: pagePath });
    },
    navigateBack({ commit, state }) {
      if (state.pageStack.length > 1) {
        commit('POP_PAGE');
        uni.navigateBack();
      } else {
        // 如果只剩下一个页面，可以选择重定向到首页或其他页面
        uni.redirectTo({ url: '/' }); // 示例，根据实际情况调整
      }
    }
  }
});

export default store;

2. 使用条件判断避免重复跳转

在调用uni.navigateBack()之前，检查当前页面是否为目标页面，避免不必要的跳转。

// 在组件或页面的methods中
methods: {
  goBack() {
    const pages = getCurrentPages();
    const currentPagePath = pages[pages.length - 1].route;
    const targetPagePath = pages[pages.length - 2] ? pages[pages.length - 2].route : '/';

    if (currentPagePath !== targetPagePath) {
      uni.navigateBack();
    } else {
      // 如果已经在目标页面，则不执行跳转操作
      console.log('已经在目标页面，无需返回');
    }
  }
}

3. 错误处理和回退机制

为页面跳转添加错误处理逻辑，当uni.navigateBack()失败时，提供一个回退方案。

uni.navigateBack({
  success: () => {
    console.log('返回成功');
  },
  fail: () => {
    console.error('返回失败，执行回退方案');
    // 执行回退方案，比如重定向到首页
    uni.redirectTo({ url: '/' });
  }
});

通过上述方法，可以在一定程度上解决夸克浏览器下uni.navigateBack()导致的问题，提高应用的健壮性和用户体验。

回到顶部