Route Meta

Route meta (RouteMeta) is used to attach custom properties to routes, such as page title, permission requirements, TabBar identification, etc.

RouteMeta Interface

interface RouteMeta {
  title?: string
  isTab?: boolean
  requireAuth?: boolean
  [key: string]: unknown
}

Built-in Fields

title

Page title, can be used in afterEach hooks to dynamically set the navigation bar title:

const routes = [
  { path: 'pages/index/index', name: 'home', meta: { title: 'Home' } },
  { path: 'pages/about/about', name: 'about', meta: { title: 'About Us' } }
]

router.afterEach((to) => {
  if (to.meta.title) {
    uni.setNavigationBarTitle({ title: to.meta.title as string })
  }
})

isTab

Identifies whether the page is a TabBar page. The router automatically selects the navigation API based on this field:

• isTab: true → uni.switchTab
• isTab: false or not set → uni.navigateTo / uni.redirectTo

const routes = [
  { path: 'pages/user/user', name: 'user', meta: { isTab: true } }
]

// Automatically uses uni.switchTab
router.push({ name: 'user' })

::: important isTab must be consistent with the tabBar.list declaration in pages.json. If a page is a TabBar page but isTab: true is not set, navigation will use uni.navigateTo instead of uni.switchTab, causing navigation failure. :::

requireAuth

Identifies whether the page requires login authentication, commonly used with route guards:

const routes = [
  { path: 'pages/profile/profile', name: 'profile', meta: { requireAuth: true } }
]

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth && !isLoggedIn()) {
    next({ name: 'login' })
  } else {
    next()
  }
})

Custom Extension Fields

RouteMeta supports adding arbitrary custom fields through index signatures:

const routes = [
  {
    path: 'pages/article/article',
    name: 'article',
    meta: {
      title: 'Article Detail',
      requireAuth: false,
      keepAlive: true,
      pageType: 'content',
      permissions: ['read', 'comment']
    }
  }
]

Access custom fields in guards:

router.beforeEach((to, from, next) => {
  const permissions = to.meta.permissions as string[] | undefined
  if (permissions && !hasPermissions(permissions)) {
    next(false)
  } else {
    next()
  }
})

TIP

Type assertions are needed when accessing custom fields because the index signature value is unknown type.

Accessing Meta

In Components

import { useRoute } from '@meng-xi/uni-router'

const route = useRoute()
console.log(route.meta.title)
console.log(route.meta.isTab)

In Guards

router.beforeEach((to, from, next) => {
  console.log(to.meta.requireAuth)
  next()
})

Via Router Instance

router.currentRoute.meta.title