Vue Router 的 meta动态设置

Vue Router 中的 `meta` 属性允许你在路由配置中添加自定义数据，通常用于元信息，如权限控制、页面标题、面包屑导航等。当你需要让某个特定属性动态地取决于路由的条件或者用户的登录状态时，可以利用 JavaScript 在路由钩子中设置或更新 `meta`。

例如，你可以这样做：

// 定义路由时
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true },
  },
];

// 路由守卫（router guards）
router.beforeEach((to, from, next) => {
  const hasAccess = checkUserAuthorization(to.meta.requiresAuth); // 检查用户是否授权

  if (hasAccess) {
    next();
  } else {
    // 用户无权访问，可以重定向到登录页或者其他处理方式
    next({ name: 'login', query: { redirect: to.fullPath } });
  }
});

function checkUserAuthorization(requiresAuth) {
  // 根据当前用户的状态判断返回布尔值
  // 如果用户已登录则返回true，反之返回false
}

在这个例子中，`requiresAuth` 变量可以在创建路由时就设置，也可以在路由守卫中根据需求动态改变。当用户试图访问受保护的页面时，如果未登录，则会触发相应的权限检查流程。