路由导航

👑首创

RouterNav 是一个轻量级的全局导航组件。 它通常放置在应用的根节点（如 App.vue），在屏幕底部提供一个可配置的触发按钮。点击触发器后，会滑出一个包含导航按钮组的底部抽屉（Drawer），非常适合作为系统的快速入口、开发环境的调试菜单或移动端的主导航。

基础用法

通常在 App.vue 中引入并配置。组件处于视图的最顶层，不占用文档流布局。

<script setup>
import { reactive } from "vue";

const state = reactive({
  navConfig: {
    // 导航配置项
    options: [
      { label: "工作台", path: "/" },
      { label: "组件库", path: "/components" },
      { label: "系统设置", path: "/settings" },
      { label: "关于我们", path: "/about" },
    ],
    // 触发器配置
    triggerPosition: "right",
    triggerStyle: "react",
    triggerAni: true,
  }
})
</script>

<template>
  <TuiProvider>
    <router-view></router-view>
    
    <TuiRouterNav v-bind="state.navConfig"/>
  </TuiProvider>
</template>

配置详解

数据源 (Options)

通过 options 属性定义导航项。每个对象必须包含 label (按钮文字) 和 path (路由路径)。

const options = [
  { label: "Home", path: "/home" },
  { label: "Profile", path: "/user/profile" }
];

触发器外观 (Trigger)

控制屏幕底部常驻按钮的样式和位置。

• 位置 (triggerPosition): 支持 'left', 'center', 'right'。
• 样式 (triggerStyle):
  • 'react' (默认): 长方形按钮，适合展示文字或紧凑布局。
  • 'circle': 圆形按钮，类似于悬浮球 (FAB)。
• 动画 (triggerAni): 开启后，触发按钮会有周期性的“涟漪”动画，以提示用户点击。可通过 triggerAniDelay 调整动画间隔。

抽屉与按钮布局

• 按钮宽度 (buttonWidth): 定义抽屉内导航按钮的宽度。默认为 'auto'（自适应内容），也可设为固定数值（如 200）以保持整齐。
• 遮罩层 (modal): 是否显示半透明背景遮罩。默认为 true。

API 参考

Props

属性名	类型	默认值	说明
options	Array	[]	核心数据。对象数组，必须包含 { label, path }。
triggerPosition	String	'center'	触发按钮位置。可选：'left', 'center', 'right'。
triggerStyle	String	'react'	触发按钮样式。可选：'react' (长方), 'circle' (圆)。
triggerAni	Boolean	true	是否开启触发按钮的提示动画。
triggerAniDelay	Number	5000	动画循环延迟时间 (ms)。
buttonWidth	Number/String	'auto'	抽屉内导航按钮的宽度。
modal	Boolean	true	打开抽屉时是否显示遮罩层。
useOrder	Boolean	true	是否显示序号或保持特定排序逻辑。

依赖组件

该组件底层调用了 TuiDrawer 组件来实现从底部滑出的交互效果。