vue-router 路由元信息

Vue Router 的路由元信息（Route Meta Fields）是指在路由配置中，可以为每个路由添加一些额外的元数据，这些元数据可以被路由守卫、导航钩子、组件内部等地方引用，用于实现一些复杂的功能。以下是一些常见的路由元信息的应用：

• meta.title: 用于设置页面标题，可以在路由守卫中根据该属性动态设置页面标题。
• meta.requiresAuth: 用于指定哪些路由需要登录验证，在导航钩子中可以根据该属性判断是否需要进行登录验证。
• meta.roles: 用于指定哪些角色可以访问该路由，可以在路由守卫中根据该属性判断当前用户是否有权限访问该路由。
• meta.breadcrumb: 用于指定面包屑导航的标题和链接，可以在组件中使用该属性来渲染面包屑导航。
• meta.keepAlive: 用于指定是否需要缓存该路由对应的组件，可以在组件内部使用该属性来控制组件是否需要缓存。
• meta.transition: 用于指定路由切换时使用的过渡动画，可以在组件中使用该属性来控制路由切换时的过渡动画效果。

除了上述元信息外，还可以根据具体业务需求定义其他自定义的元信息。需要注意的是，路由元信息是只在路由配置中有效的，因此如果需要在组件中使用某个元信息，可以通过 $route.meta 访问该元信息。

const routes = [
  { path: '/a', component: A, meta: { title: 'Custom Title A' } }
]

router.beforeEach((to, from, next) => {
  console.log('beforeEach', to, from)
  // 动态设置页面标题
  document.title = to.meta.title || 'default title'
  next()
})