Vue路由守卫可通过meta字段动态控制页面背景色：在beforeEach中读取to.meta.bgColor并设置body背景，退出时还原；推荐用CSS变量+setProperty替代内联样式，支持主题切换与SSR适配。

在 Vue 路由守卫中，可以通过路由记录的 meta 字段动态控制页面样式（如背景色），核心思路是：在路由进入前将 meta 中定义的样式配置（如 bgColor）写入 document 或 body，退出时还原。这种方式轻量、解耦，无需每个组件手动处理。

在路由配置中定义 meta 样式字段

为需要定制背景色的路由添加自定义 meta 属性，例如：

{
  path: '/home',
  component: () => import('@/views/Home.vue'),
  meta: { bgColor: '#f5f5f5' }
},
{
  path: '/admin',
  component: () => import('@/views/Admin.vue'),
  meta: { bgColor: '#001529' }
},
{
  path: '/login',
  component: () => import('@/views/Login.vue'),
  meta: { bgColor: '#fff' } // 也可设为 transparent 或渐变
}

支持任意 CSS 可接受的值（十六进制、rgb、hsl、变量名等）。未设置时可默认保留原背景或 fallback 到全局色。

在全局前置守卫中读取并应用 meta 样式

在 router/index.js 的 beforeEach 中操作 DOM：

• 保存上一个路由的原始背景色（用于离开时还原）
• 读取 to.meta.bgColor，设置到 document.body.style.backgroundColor
• 若需更精细控制（如仅影响内容区），可加 class 到 body 并用 CSS 变量配合

let prevBg = '';
router.beforeEach((to, from, next) => {
  // 还原上一个页面的背景（可选）
  if (prevBg) {
    document.body.style.backgroundColor = prevBg;
  }
  // 应用当前页面背景
  const bgColor = to.meta.bgColor;
  if (bgColor !== undefined) {
    prevBg = document.body.style.backgroundColor || '';
    document.body.style.backgroundColor = bgColor;
  } else {
    // 没有指定时可清空或设为默认色
    prevBg = '';
  }
  next();
});

进阶：用 CSS 变量 + class 实现更灵活的样式切换

避免直接操作内联样式，推荐结合 CSS 变量提升可维护性：

• 在 App.vue 或全局样式中定义：:root { --page-bg: #fff; }
• body 设置：background-color: var(--page-bg);
• 守卫中改为：document.documentElement.style.setProperty('--page-bg', bgColor)
• 还可配合 to.meta.pageClass 动态添加 body class，实现字体、间距等整套主题切换

注意边界情况与优化点

实际使用中需留意：

• SPA 页面跳转快，但首次加载时 body 可能尚未渲染，建议在 mounted 中兜底一次
• 如果用了 keep-alive，路由复用时守卫不触发，需在组件内监听 $route 变化补充更新
• 深色模式下，建议 meta 中用 theme: 'dark' 配合 CSS 媒体查询或 class 切换，比硬编码颜色更健壮
• 服务端渲染（SSR）场景下，需在服务端也同步注入对应样式，避免闪屏