Vue Router 中meta 对象示例详解

meta: { title: 'Home Page' }

meta: { requiresAuth: true }

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

meta: { breadcrumb: 'Home > About' }

meta: { layout: 'admin' }

meta: { keepAlive: true }

meta: { permission: 'view_dashboard' }

meta: { transition: 'fade' }

meta: { showInSidebar: true }

meta: {  group: 'admin' }

meta: { icon: 'VideoCamera' }

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

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();
  }
};