memorialHall 扫码导航修复说明

问题描述

用户通过扫码直接进入 memorialHall.vue 页面时，如果没有上一页（即页面栈中只有当前页面），点击返回按钮会卡在当前页面，无法正常返回。

解决方案

1. 导入路由工具函数

在 memorialHall.vue 中导入 navigateBack 函数：

import { navigateBack } from "../../utils/router.js";

2. 监听导航栏返回事件

为自定义导航栏添加 @back 事件监听：

<custom-navbar ref="customNavbar" title="往生大殿" @back="handleNavbarBack" />

3. 实现返回处理方法

添加 handleNavbarBack 方法，使用 navigateBack 函数处理返回逻辑：

// 处理导航栏返回事件
handleNavbarBack() {
  // 使用路由工具函数，如果没有上一页会自动跳转到首页
  navigateBack();
},

4. 优化自定义导航栏组件

修改 custom-navbar.vue 的 handleBack 方法，支持父组件完全控制返回逻辑：

handleBack() {
  if (this.showBack) {
    // 触发自定义事件，让父组件处理返回逻辑
    this.$emit("back");
    // 如果父组件没有监听 back 事件，则执行默认返回逻辑
    if (!this.$listeners.back) {
      uni.navigateBack({
        delta: 1,
        fail: () => {
          // 如果没有上一页，跳转到首页
          uni.switchTab({
            url: "/pages/index/index",
          });
        },
      });
    }
  }
},

工作原理

路由工具函数：navigateBack 函数会先尝试 uni.navigateBack，如果失败（没有上一页），会自动调用 reLaunchToPage("index") 跳转到首页。
事件驱动：自定义导航栏通过 @back 事件将返回控制权交给父组件，父组件可以使用自己的返回逻辑。
向下兼容：如果父组件没有监听 @back 事件，导航栏组件会执行默认的返回逻辑，确保不会破坏现有功能。

测试场景

✅ 正常页面跳转后返回（有上一页）
✅ 扫码直接进入后返回（无上一页，自动跳转首页）
✅ 其他页面使用自定义导航栏（向下兼容）

2.4 KiB Raw Permalink Blame History Unescape Escape