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

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

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

Итак, как получить доступ к этому meta полю?

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

Например, при указанной выше конфигурации маршрута URL /foo/bar будет соответствовать как родительской записи маршрута, так и дочерней записи маршрута.

Все записи маршрутов, соответствующие маршруту, доступны в объекте $route (а также в объектах маршрутов в охранниках навигации) в виде массива $route.matched. Поэтому нам необходимо перебрать $route.matched для проверки мета-полей в записях маршрутов.

Пример использования — проверка мета-поля в глобальном охраннике навигации:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // make sure to always call next()!
  }
})