路由元信息

定义路由的时候可以配置 meta 字段：

  1. const router = new VueRouter({
  2.   routes: [
  3.     {
  4.       path: '/foo',
  5.       component: Foo,
  6.       children: [
  7.         {
  8.           path: 'bar',
  9.           component: Bar,
  10.           // a meta field
  11.           meta: { requiresAuth: true }
  12.         }
  13.       ]
  14.     }
  15.   ]
  16. })

那么如何访问这个 meta 字段呢？

首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录

例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航守卫中检查元字段：

  1. router.beforeEach((to, from, next) => {
  2.   if (to.matched.some(record => record.meta.requiresAuth)) {
  3.     // this route requires auth, check if logged in
  4.     // if not, redirect to login page.
  5.     if (!auth.loggedIn()) {
  6.       next({
  7.         path: '/login',
  8.         query: { redirect: to.fullPath }
  9.       })
  10.     } else {
  11.       next()
  12.     }
  13.   } else {
  14.     next() // 确保一定要调用 next()
  15.   }
  16. })