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` - 路由工具函数（已存在）
|