Определение meta

meta — это объект, который может быть добавлен к каждой маршрутизируемой записи в конфигурации маршрутов Vue Router. Он предназначен для хранения пользовательских данных о маршруте, которые могут использоваться для управления доступом, отображением компонентов или логикой навигации.

Структура маршрута с meta

Простейший пример маршрута с meta:

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import Admin from './components/Admin.vue'

const routes = [
  {
    path: '/',
    component: Home,
    meta: { requiresAuth: false }
  },
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true, role: 'admin' }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Здесь ключ meta содержит произвольные свойства. В примере выше:

  • requiresAuth указывает, требуется ли авторизация для доступа к маршруту.
  • role определяет, какая роль пользователя допустима для маршрута.

Доступ к meta в навигационных охранниках

Одним из основных применений meta является контроль доступа к маршрутам через навигационные охранники (navigation guards). Пример глобального охранника:

router.beforeEach((to, from, next) => {
  const isAuthenticated = Boolean(localStorage.getItem('userToken'))

  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ path: '/' })
  } else {
    next()
  }
})

Пояснение:

  • to.meta содержит объект meta маршрута, на который происходит переход.
  • С помощью to.meta.requiresAuth можно определить необходимость проверки авторизации.
  • next() позволяет продолжить навигацию, а next({ path: '/' }) перенаправляет на другой маршрут.

Наследование meta в дочерних маршрутах

Если маршрут имеет вложенные маршруты (children), объект meta можно наследовать или расширять. Например:

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true },
    children: [
      {
        path: 'settings',
        component: Settings,
        meta: { role: 'editor' }
      }
    ]
  }
]

Доступ к объединённой информации meta осуществляется через to.matched:

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const role = to.matched.find(record => record.meta.role)?.meta.role

  const isAuthenticated = Boolean(localStorage.getItem('userToken'))
  const userRole = 'editor' // пример, берется из состояния приложения

  if (requiresAuth && !isAuthenticated) {
    next({ path: '/' })
  } else if (role && role !== userRole) {
    next({ path: '/unauthorized' })
  } else {
    next()
  }
})

Здесь:

  • to.matched — массив всех маршрутов, совпадающих с текущим путём, начиная с родительского до конечного дочернего.
  • Метод some проверяет наличие условия requiresAuth хотя бы у одного маршрута.
  • Метод find позволяет извлечь конкретное свойство meta для специфической логики, например, проверки роли.

Динамические свойства в meta

meta может содержать динамические данные, например, для управления заголовками страниц или хлебными крошками:

const routes = [
  {
    path: '/profile/:id',
    component: Profile,
    meta: route => ({ title: `Профиль пользователя ${route.params.id}` })
  }
]

router.afterEach((to) => {
  const meta = typeof to.meta === 'function' ? to.meta(to) : to.meta
  document.title = meta?.title || 'Приложение'
})
  • Если meta задан функцией, её можно вычислять с учётом параметров маршрута.
  • Использование в afterEach позволяет динамически изменять заголовок страницы или другую логику после завершения навигации.

Практические советы по использованию meta

  1. Разделение ответственности: Использовать meta только для данных, относящихся к маршруту, а не для состояния приложения.
  2. Избегать избыточности: Не дублировать логику, которая уже доступна через компоненты.
  3. Унификация формата: Если используются роли, заголовки или флаги авторизации, стандартизировать ключи в meta для всех маршрутов.
  4. Совмещение с Vuex/Pinia: meta может взаимодействовать с состоянием приложения для проверки прав доступа, без захламления маршрутов логикой авторизации.

Примеры расширенного использования meta

  • Breadcrumbs: хранение названий для навигационных цепочек.
  • Layout: выбор компонента-контейнера для разных маршрутов.
  • Analytics: идентификаторы страниц для систем аналитики.
  • Transition: анимации переходов между маршрутами.

meta — гибкий инструмент, позволяющий хранить и использовать дополнительные данные о маршруте для управления доступом, отображением компонентов и динамическим поведением приложения.

Оглавление