Мета-поля маршрутов

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

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // only authenticated users can create posts
        meta: { requiresAuth: true }
      },
      {
        path: ':id',
        component: PostsDetail,
        // anybody can read a post
        meta: { requiresAuth: false }
      }
    ]
  }
]

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

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

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

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

router.beforeEach((to, from) => {
  // instead of having to check every route record with
  // to.matched.some(record => record.meta.requiresAuth)
  if (to.meta.requiresAuth && !auth.isLoggedIn()) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    return {
      path: '/login',
      // save the location we were at to come back later
      query: { redirect: to.fullPath },
    }
  }
})

TypeScript

Можно типизировать поле мета, расширив интерфейс RouteMeta.

// typings.d.ts or router.ts
import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    // is optional
    isAdmin?: boolean
    // must be declared by every route
    requiresAuth: boolean
  }
}