72 lines
2.4 KiB
Markdown
72 lines
2.4 KiB
Markdown
|
# memorialHall 扫码导航修复说明
|
|||
|
|
|
|||
|
|
## 问题描述
|
|||
|
|
用户通过扫码直接进入 `memorialHall.vue` 页面时，如果没有上一页（即页面栈中只有当前页面），点击返回按钮会卡在当前页面，无法正常返回。
|
|||
|
|
|
|||
|
|
## 解决方案
|
|||
|
|
|
|||
|
|
### 1. 导入路由工具函数
|
|||
|
|
在 `memorialHall.vue` 中导入 `navigateBack` 函数：
|
|||
|
|
```javascript
|
|||
|
|
import { navigateBack } from "../../utils/router.js";
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 监听导航栏返回事件
|
|||
|
|
为自定义导航栏添加 `@back` 事件监听：
|
|||
|
|
```vue
|
|||
|
|
<custom-navbar ref="customNavbar" title="往生大殿" @back="handleNavbarBack" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 实现返回处理方法
|
|||
|
|
添加 `handleNavbarBack` 方法，使用 `navigateBack` 函数处理返回逻辑：
|
|||
|
|
```javascript
|
|||
|
|
// 处理导航栏返回事件
|
|||
|
|
handleNavbarBack() {
|
|||
|
|
// 使用路由工具函数，如果没有上一页会自动跳转到首页
|
|||
|
|
navigateBack();
|
|||
|
|
},
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 优化自定义导航栏组件
|
|||
|
|
修改 `custom-navbar.vue` 的 `handleBack` 方法，支持父组件完全控制返回逻辑：
|
|||
|
|
```javascript
|
|||
|
|
handleBack() {
|
|||
|
|
if (this.showBack) {
|
|||
|
|
// 触发自定义事件，让父组件处理返回逻辑
|
|||
|
|
this.$emit("back");
|
|||
|
|
// 如果父组件没有监听 back 事件，则执行默认返回逻辑
|
|||
|
|
if (!this.$listeners.back) {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1,
|
|||
|
|
fail: () => {
|
|||
|
|
// 如果没有上一页，跳转到首页
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: "/pages/index/index",
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 工作原理
|
|||
|
|
|
|||
|
|
1. **路由工具函数**：`navigateBack` 函数会先尝试 `uni.navigateBack`，如果失败（没有上一页），会自动调用 `reLaunchToPage("index")` 跳转到首页。
|
|||
|
|
|
|||
|
|
2. **事件驱动**：自定义导航栏通过 `@back` 事件将返回控制权交给父组件，父组件可以使用自己的返回逻辑。
|
|||
|
|
|
|||
|
|
3. **向下兼容**：如果父组件没有监听 `@back` 事件，导航栏组件会执行默认的返回逻辑，确保不会破坏现有功能。
|
|||
|
|
|
|||
|
|
## 测试场景
|
|||
|
|
|
|||
|
|
- ✅ 正常页面跳转后返回（有上一页）
|
|||
|
|
- ✅ 扫码直接进入后返回（无上一页，自动跳转首页）
|
|||
|
|
- ✅ 其他页面使用自定义导航栏（向下兼容）
|
|||
|
|
|
|||
|
|
## 相关文件
|
|||
|
|
|
|||
|
|
- `pages/memorial/memorialHall.vue` - 主要修改页面
|
|||
|
|
- `components/custom-navbar/custom-navbar.vue` - 导航栏组件优化
|
|||
|
|
- `utils/router.js` - 路由工具函数（已存在）
|