[vue-router] 라우터 메타 필드

라우터를 정의할 대 meta 필드를 포함할 수 있습니다.

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

routes 설정의 각각의 라우터 객체를 라우트 레코드라고 합니다. 라우트 레코드는 중첩 될 수 있기 때문에, 라우터가 일치하면 2개 이상의 라우트 레코드와 일치 할 수 있습니다.
예를 들어, 위의 코드와 같이 라우트를 설정하면, /foo/bar라는 URL로 접속 하였을 때, 상위 레코드와 하위 레코드 2개가 일치하게 됩니다.
라우트와 일치하는 모든 라우트 레코드는 $route.matched 배열에 저장됩니다.$route.matched 배열을 뒤져서 라우트 레코드의 메타 필드에 접근 할 수 있습니다.

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 이 라우트는 인증이 필요하며 로그인 한 경우 확인하십시오.
    // 그렇지 않은 경우 로그인 페이지로 리디렉션하십시오.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 반드시 next()를 호출하십시오!
  }
})

위의 코드와 같이 라우트에 매칭된 값이 저장되는 to.matched(to는 이동할 라우터 객체를 나타냅니다.) 배열 중 각각의 객체에 저장된 meta 필드를 사용하여 라우트 설정의 메타 필드에 접근 할 수 있습니다.

참고

• https://router.vuejs.org/kr/guide/advanced/transitions.html