路由元信息 meta

希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。

这些事情可以通过接收属性对象的meta属性来实现，并且，它可以在路由地址和导航守卫上都被访问到。

定义与检查 meta 字段

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

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 只有经过身份验证的用户才能创建帖子
        meta: { requiresAuth: true }
      },
      {
        path: ':id',
        component: PostsDetail
        // 任何人都可以阅读文章
        meta: { requiresAuth: false }
      }
    ]
  }
]

如果需要检查 meta 字段，

• 方式 1：可以通过遍历 $route.matched 数组的方式来实现
• 方式 2：还可以使用 $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 },
    }
  }
})

过渡动效

<router-view> 是基本的动态组件，所以可以用 <transition> 组件给它添加一些过渡效果：

<transition>
  <router-view></router-view>
</transition>

下面是一个实例

.router-link-active{background:pink;}
  .v-enter,.v-leave-to{
    opacity:0;
  }
  .v-enter-active,.v-leave-active{
    transition:opacity .5s;
  }

<div id="app">
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{name:'foo'}">Go to Foo</router-link>
    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
    <transition>
        <router-view></router-view>
    </transition>
  </p>
</div>

[ 单个路由过渡 ] 上面的用法会给所有路由设置一样的过渡效果，如果想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 <transition> 并设置不同的 name

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}
const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}