uni-app vue3 H5运行下，刷新页面页面栈丢失，自带返回按钮失效

uni-app vue3 H5运行下，刷新页面页面栈丢失，自带返回按钮失效

操作步骤：

  • 访问二级页面，刷新，点浏览器返回按钮

预期结果：

  • 能返回首次浏览器的上一浏览页面

实际结果：

  • 返回非项目内的上一个页面

bug描述：

不刷新页面，能正常返回，刷新页面后，使用history.go(-1)和history.back()都能正常返回，点浏览器自带返回按钮则返回到项目访问前的历史，有什么办法能兼容vue2那样，返回按钮始终展示且可返回上一个浏览器历史里面


| 项目信息         | 详情          |
|------------------|---------------|
| 产品分类         | uniapp/H5     |
| PC开发环境       | Windows       |
| PC开发环境版本   | windows 10    |
| 浏览器平台       | Chrome        |
| 浏览器版本       | 122.0.6261.95 |
| 项目创建方式     | CLI           |
| CLI版本号        | 3.8.7         |

更多关于uni-app vue3 H5运行下，刷新页面页面栈丢失，自带返回按钮失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

cli 创建了vue3 项目，刷新可以返回，你试试， 看哪里没理解到你的意思

更多关于uni-app vue3 H5运行下，刷新页面页面栈丢失，自带返回按钮失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


实在抱歉，还辛苦您演示，是我表达错误，是刷新后页面栈丢失，uniapp自带的头部返回按钮做了判断，导致二级页面刷新后无法返回上一页，我的诉求是怎么拦截改写自带的返回按钮事件

找到办法了，h5模式试下，改写uni.reLaunch和uni.navigateBack，都改为history.go(-1)

在 UniApp 中使用 Vue 3 开发 H5 应用时，页面刷新会导致页面栈丢失，从而导致自带的返回按钮失效。这是因为 H5 页面刷新后，Vue 的路由状态和页面栈信息会被重置，从而导致页面栈丢失。

解决方案

  1. 使用 Vue Router 管理路由状态 UniApp 在 H5 环境下支持使用 Vue Router 来管理路由状态。你可以通过配置 Vue Router 来保持页面栈的状态。

    // main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('@/pages/index/index.vue') },
    { path: '/page1', component: () => import('@/pages/page1/page1.vue') },
    // 其他路由配置
  ],
});

const app = createApp(App);
app.use(router);
app.mount('#app');

  2. 手动管理页面栈 如果你不想使用 Vue Router，可以手动管理页面栈。例如，使用 uni.navigateTo 和 uni.redirectTo 等方法时，记录页面栈的状态。

    // 在页面跳转时记录页面栈
const pageStack = [];

function navigateTo(url) {
  pageStack.push(url);
  uni.navigateTo({ url });
}

function redirectTo(url) {
  pageStack.pop(); // 替换当前页面
  pageStack.push(url);
  uni.redirectTo({ url });
}

function navigateBack() {
  if (pageStack.length > 1) {
    pageStack.pop();
    uni.navigateBack({ delta: 1 });
  } else {
    uni.switchTab({ url: '/pages/index/index' }); // 返回首页
  }
}

  3. 使用 uni.getCurrentPages 获取当前页面栈 UniApp 提供了 uni.getCurrentPages 方法，可以获取当前页面栈。你可以在页面刷新后，通过 uni.getCurrentPages 恢复页面栈。

    // 在页面加载时恢复页面栈
const currentPages = uni.getCurrentPages();
if (currentPages.length > 0) {
  const currentRoute = currentPages[currentPages.length - 1].route;
  // 根据 currentRoute 恢复页面栈
}

  4. 使用 localStorage 或 sessionStorage 保存页面栈状态 你可以在页面跳转时，将页面栈的状态保存到 localStorage 或 sessionStorage 中，在页面刷新后恢复页面栈。

    // 保存页面栈状态
function savePageStack(stack) {
  localStorage.setItem('pageStack', JSON.stringify(stack));
}

// 恢复页面栈状态
function restorePageStack() {
  const stack = JSON.parse(localStorage.getItem('pageStack') || '[]');
  return stack;
}

  5. 自定义返回按钮 如果自带的返回按钮失效，你可以自定义一个返回按钮，并在点击时调用 uni.navigateBack 方法。

    <template>
  <view>
    <button @click="handleBack">返回</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleBack() {
      uni.navigateBack({ delta: 1 });
    },
  },
};
</script>
回到顶部