Detailed explanation of the meta object example in Vue Router

In Vue Router,metaObjects can contain any custom information you wish to attach to the route. There are no fixed standards for the specific configuration content, mainly depending on your application needs. Here are some common onesmetaConfiguration information, explaining their purpose and how they are used:

Common meta configuration information

title

• describe: The title of the page.
• use: Usually used to dynamically set the title of a browser tab.
• Example：

meta: { title: 'Home Page' }

requiresAuth

• describe: Whether user authentication is required.
• use: Used to check whether the user is authenticated in the routing guard, thereby determining whether to allow access to a certain page.
• Example：

meta: { requiresAuth: true }

roles

• describe: The user role required to access the route.
• use: Can be used for permission control to ensure that only users of a specific role can access a specific page.
• Example：

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

breadcrumb

• describe: Display text for breadcrumb navigation.
• use: Used to display breadcrumb navigation information on the page.
• Example：

meta: { breadcrumb: 'Home > About' }

layout

• describe: Specifies the layout component used by the route.
• use: Used to apply different layouts in different routes.
• Example：

meta: { layout: 'admin' }

keepAlive

• describe: Whether to enable cache of Vue components.
• use: Can be used to control whether certain pages need to be cached to improve performance.
• Example：

meta: { keepAlive: true }

permission

• describe: Custom permission settings.
• use: Can be used for more complex permission control logic.
• Example：

meta: { permission: 'view_dashboard' }

transition

• describe: The name of the route switching animation.
• use: Specify the animation effect used when switching routes.
• Example：

meta: { transition: 'fade' }

showInSidebar

• describe: Whether to display the route in the sidebar.
• use: Can be used to dynamically generate sidebar menus.
• Example：

meta: { showInSidebar: true }

group

• describe: The identity of the routed packet.
• use: Used to organize routing, especially in large applications.
• Example：

meta: {  group: 'admin' }

icon

• describe: Specify the icon associated with the route.
• use: Used for navigation bar menus or sidebars to enhance user interface and user experience.
• Notice: Make sure to use the icon class (e.g.home-icon, info-icon) Consistent with the class name of the actual icon library. For example, if you are using Font Awesome, you need to set it according to the class name of Font Awesomeiconproperty.
• Example：

meta: { icon: 'VideoCamera' }

Example: Configuring and accessing meta information

Configuration

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'
    }
  }
];

accessmetainformation

In the global front guard:

((to, from, next) => {
   =  || 'Default Title';
  if ( && !isAuthenticated()) {
    next('/login');
  } else if ( && !hasRequiredRole()) {
    next('/unauthorized');
  } else {
    next();
  }
});

In the component:

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

Summarize

metaObjects allow you to add custom information to routes, flexibly adapting to different needs of your application. Although Vue Router itself is wrongmetaThere are restrictions on the content in the object, and you can freely define and use this information according to actual needs. This allows routing configuration to be more flexible and scalable.

This is the end of this article about the meta object in Vue Router. For more related contents of Vue Router meta object, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!