# Composables 使用指南

## 导航栏状态管理 (useNavigation)

这个 composable 用于管理导航栏的状态，特别是检测当前路由栈中的页面数量，帮助决定是否显示返回首页按钮。

### 基本用法

```vue
<template>
  <view class="custom-navbar">
    <!-- 返回按钮 - 当路由栈有多个页面时显示 -->
    <view v-if="hasMultiplePages" class="back-btn" @click="uni.navigateBack()">
      <text class="ri-arrow-left-s-line"></text>
    </view>
    
    <!-- 返回首页按钮 - 当路由栈有多个页面且不是tabBar页面时显示 -->
    <view v-if="hasMultiplePages && !isTabBarPage" class="home-btn" @click="toHome">
      <text class="ri-home-line"></text>
    </view>
    
    <!-- 页面标题 -->
    <view class="title">页面标题</view>
  </view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app'
import { useNavigation } from '@/composables/useNavigation'

// 使用导航 composable
const { 
  hasMultiplePages,   // 是否有多个页面在路由栈中
  isTabBarPage,       // 当前页面是否为 tabBar 页面
  checkRouteStack     // 检查当前路由栈状态的方法
} = useNavigation()

// 返回首页方法
const toHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}

// 在 onShow 生命周期中重新检查路由栈状态
onShow(() => {
  checkRouteStack()
})
</script>
```

### 关键属性和方法

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| hasMultiplePages | Ref\<boolean\> | 路由栈中是否有多个页面，用于决定是否显示返回按钮 |
| isTabBarPage | Ref\<boolean\> | 当前页面是否为 tabBar 页面，用于决定是否显示返回首页按钮 |
| checkRouteStack | Function | 检查并更新当前路由栈状态的方法，在页面显示时调用 |

### 使用步骤

1. 在页面中导入 `useNavigation`
2. 在 `setup` 中调用此函数，获取状态和方法
3. 在 `onShow` 生命周期中调用 `checkRouteStack()` 方法更新状态
4. 在模板中根据 `hasMultiplePages` 和 `isTabBarPage` 状态显示或隐藏相应的按钮

### 注意事项

- 需要在每个页面的 `onShow` 生命周期中调用 `checkRouteStack()`，以确保状态始终是最新的
- tabBar 页面列表已经预设为 `['pages/index/index', 'pages/message/index', 'pages/mine/index']`，如需修改请直接编辑 `useNavigation.ts` 文件