Router Navigation

👑Pioneer

RouterNav is a lightweight global navigation component. It is typically placed at the root node of the application (such as App.vue) to provide a configurable trigger button at the bottom of the screen. When the trigger is clicked, a bottom drawer slides out containing a group of navigation buttons. It is highly suitable as a quick entry point for the system, a debugging menu for development environments, or the main navigation for mobile terminals.

Basic Usage

Usually introduced and configured in App.vue. The component stays at the top layer of the view and does not occupy document flow layout.

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

const state = reactive({
  navConfig: {
    // Navigation configuration items
    options: [
      { label: "Workbench", path: "/" },
      { label: "Components", path: "/components" },
      { label: "Settings", path: "/settings" },
      { label: "About Us", path: "/about" },
    ],
    // Trigger configuration
    triggerPosition: "right",
    triggerStyle: "react",
    triggerAni: true,
  }
})
</script>

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

Configuration Details

Data Source (Options)

Define navigation items via the options property. Each object must contain a label (button text) and a path (route path).

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

Trigger Appearance

Controls the style and position of the resident button at the bottom of the screen.

• Position (triggerPosition): Supports 'left', 'center', and 'right'.
• Style (triggerStyle):
  • 'react' (default): Rectangular button, suitable for displaying text or compact layouts.
  • 'circle': Circular button, similar to a Floating Action Button (FAB).
• Animation (triggerAni): When enabled, the trigger button features a periodic "ripple" animation to prompt user clicks. The interval can be adjusted via triggerAniDelay.

Drawer and Button Layout

• Button Width (buttonWidth): Defines the width of the navigation buttons inside the drawer. The default is 'auto' (adaptive to content), but it can also be set to a fixed numerical value (e.g., 200) to maintain alignment.
• Mask Layer (modal): Whether to display a semi-transparent background mask. The default is true.

API Reference

Props

Property	Type	Default	Description
options	Array	[]	Core data. Array of objects, must contain { label, path }.
triggerPosition	String	'center'	Trigger button position. Options: 'left', 'center', 'right'.
triggerStyle	String	'react'	Trigger button style. Options: 'react' (Rectangular), 'circle' (Circular).
triggerAni	Boolean	true	Whether to enable the prompt animation for the trigger button.
triggerAniDelay	Number	5000	Animation loop delay time (ms).
buttonWidth	Number/String	'auto'	Width of the navigation buttons inside the drawer.
modal	Boolean	true	Whether to show the mask layer when opening the drawer.
useOrder	Boolean	true	Whether to display serial numbers or maintain specific sorting logic.

Dependent Components

This component internally calls the TuiDrawer component to implement the interaction effect of sliding out from the bottom.