Метаданные маршрутов

Смотрите бесплатные видео-уроки на Vue School

Иногда вам может потребоваться прикрепить произвольную информацию к маршрутам, например: имена переходов анимации или роли пользователей для управления доступом к маршруту и т. д. Это можно сделать с помощью свойства meta, которое принимает объект свойств и может быть доступно на странице маршрута и навигационных хуках. Вы можете определить meta свойства следующим образом:

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // только авторизованные пользователи могут создавать сообщения
        meta: { requiresAuth: true },
      },
      {
        path: ':id',
        component: PostsDetail,
        // кто угодно может прочитать сообщение
        meta: { requiresAuth: false },
      },
    ],
  },
]

Как же получить доступ к этому meta полю?

Во-первых, каждый объект маршрута в конфигурации routes называется записью маршрута. Записи маршрутов могут быть вложенными. Поэтому при сопоставлении маршрута он может соответствовать более чем одной записи маршрута.

Например, в приведенной выше конфигурации маршрута URL /posts/new будет соответствовать как родительской записи маршрута (path: '/posts'), так и дочерней записи (path: 'new').

Все совпавшие записи маршрутов оказываются доступны в объекте route (а также через объекты маршрутов в навигационных хуках) как массив route.matched. Таким образом, для проверки метаданных в записях маршрутов нам понадобится обойти route.matched в цикле, но Vue Router также предоставляет объект route.meta, который представляет собой не рекурсивное объединение всех meta полей от родителя к потомку. Это означает, что вы можете просто написать:

router.beforeEach((to, from) => {
  // вместо того, чтобы проверять каждую запись маршрута с помощью
  // to.matched.some(record => record.meta.requiresAuth)
  if (to.meta.requiresAuth && !auth.isLoggedIn()) {
    // данный маршрут требует авторизации, проверяем,
    // вошел ли пользователь в систему
    // если нет, то перенаправляем на страницу входа.
    return {
      path: '/login',
      // сохранить адрес, в котором мы находились,
      // чтобы вернуться к нему позже
      query: { redirect: to.fullPath },
    }
  }
})

TypeScript

Чтобы типизировать meta поля, необходимо расширить интерфейс RouteMeta из vue-router:

// Этот код может быть напрямую добавлен в любой из ваших файлов `.ts`,
// например `router.ts`
// Он также может быть добавлен в файл `.d.ts`.
// Убедитесь, что он включен в  "файлы" tsconfig.json проекта
import 'vue-router'

// Для того чтобы он рассматривался как модуль,
// добавьте хотя бы один оператор `export`
export {}

declare module 'vue-router' {
  interface RouteMeta {
    // опционально
    isAdmin?: boolean
    // должно быть определено для каждого маршрута
    requiresAuth: boolean
  }
}