staff/hooks

Composables 使用指南

导航栏状态管理 (useNavigation)

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

基本用法

<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 文件