vue router meta

在 Vue Router 中，可以通过 `meta` 字段来定义一些元信息（meta information），这些元信息可以用于控制路由的访问权限、页面标题、页面描述等。`meta` 字段是一个对象，可以包含多个属性，常见的属性有：

- `title`：页面标题，显示在浏览器标签页中。
- `description`：页面描述，用于搜索引擎优化。
- `requiresAuth`：布尔值，表示该页面是否需要登录才能访问。
- `roles`：数组，表示该页面需要的用户角色列表。
- `permission`：字符串，表示该页面需要的权限名称。

可以在路由配置文件中为每个路由定义一个 `meta` 字段，例如：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '首页',
      description: '这是我的博客首页'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      title: '关于我',
      description: '这是我的个人简介页面'
    }
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: {
      title: '控制面板',
      requiresAuth: true,
      roles: ['admin', 'editor'],
      permission: 'dashboard.view'
    }
  }
]

在应用程序中，可以通过 `router.beforeEach` 钩子函数来验证路由的元信息，例如：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else if (to.meta.roles && !hasRole(to.meta.roles)) {
    next('/403')
  } else if (to.meta.permission && !hasPermission(to.meta.permission)) {
    next('/403')
  } else {
    next()
  }
})

在上面的代码中，如果访问的路由需要登录才能访问，但是当前用户没有登录，则会重定向到登录页面；如果访问的路由需要特定的用户角色或权限，但是当前用户没有相应的权限，则会重定向到 403 页面。