Vue Router 中，meta 对象。

在 Vue Router 中，meta 对象可以包含任何你希望附加到路由的自定义信息。具体的配置内容并没有固定的标准，主要取决于你的应用需求。下面列出了一些常见的 meta 配置信息，说明它们的用途和使用方式：

常见的 meta 配置信息

1. title

   • 描述：页面的标题。
   • 用途：通常用于动态设置浏览器标签页的标题。
   • 示例：

     meta: { title: 'Home Page' }
     

2. requiresAuth

   • 描述：是否需要用户认证。
   • 用途：用于在路由守卫中检查用户是否已认证，从而决定是否允许访问某个页面。
   • 示例：

     meta: { requiresAuth: true }
     

3. roles

   • 描述：访问该路由所需的用户角色。
   • 用途：可以用于权限控制，确保只有特定角色的用户才能访问特定页面。
   • 示例：

     meta: { roles: ['admin', 'editor'] }
     

4. breadcrumb

   • 描述：面包屑导航的显示文本。
   • 用途：用于在页面上显示面包屑导航信息。
   • 示例：

     meta: { breadcrumb: 'Home > About' }
     

5. layout

   • 描述：指定路由使用的布局组件。
   • 用途：用于在不同的路由中应用不同的布局。
   • 示例：

     meta: { layout: 'admin' }
     

6. keepAlive

   • 描述：是否启用 Vue 组件的缓存。
   • 用途：可以用于控制某些页面是否需要缓存，以提高性能。
   • 示例：

     meta: { keepAlive: true }
     

7. permission

   • 描述：自定义权限设置。
   • 用途：可以用于更复杂的权限控制逻辑。
   • 示例：

     meta: { permission: 'view_dashboard' }
     

8. transition

   • 描述：路由切换动画的名称。
   • 用途：指定路由切换时使用的动画效果。
   • 示例：

     meta: { transition: 'fade' }
     

9. showInSidebar

   • 描述：是否在侧边栏中显示该路由。
   • 用途：可以用于动态生成侧边栏菜单。
   • 示例：

     meta: { showInSidebar: true }
     

10. group

    • 描述：将路由分组的标识。
    • 用途：用于组织路由，特别是在大型应用中。
    • 示例：

      meta: {  group: 'admin' }
      

11. icon

    • 描述：指定与路由关联的图标。
    • 用途：用于导航栏菜单或侧边栏，以增强用户界面和用户体验。
    • 注意：确保使用的图标类（如 home-icon, info-icon）与实际图标库的类名一致。例如，如果你使用 Font Awesome，你需要根据 Font Awesome 的类名来设置 icon属性。
    • 示例：

      meta: { icon: 'VideoCamera' }
      

示例：配置和访问 meta 信息

配置

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: 'Home Page',
      requiresAuth: false,
      breadcrumb: 'Home',
      keepAlive: true
    }
  },
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    meta: {
      title: 'Admin Dashboard',
      requiresAuth: true,
      roles: ['admin'],
      layout: 'admin',
      transition: 'fade'
    }
  }
];

访问 meta 信息

在全局前置守卫中：

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'Default Title';

  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else if (to.meta.roles && !hasRequiredRole(to.meta.roles)) {
    next('/unauthorized');
  } else {
    next();
  }
});

在组件中：

export default {
  name: 'Admin',
  beforeRouteEnter(to, from, next) {
    document.title = to.meta.title || 'Default Title';
    next();
  }
};

总结

meta 对象允许你为路由添加自定义信息，灵活地适应应用的不同需求。虽然 Vue Router 本身不对 meta 对象中的内容做出限制，你可以根据实际需要自由定义和使用这些信息。这样可以使得路由配置更具灵活性和可扩展性。