如何使用vue-router为不同路由配置对应的background-color

你之前的配置只是在路由meta字段中定义了backgroundColor属性，并没有将该属性值绑定到对应DOM的样式规则上，因此不会生效，可参考以下两种方案实现：

• 方案一：通过全局路由守卫统一处理，适合多路由批量配置场景
  无需修改原有路由的meta配置，只需要在路由实例中新增全局前置守卫，在路由切换时动态修改页面根容器的背景色即可：

  import meeting from '../components/meeting.vue'
  import { colors } from 'vuetify/lib'
  Vue.use(VueRouter)
  const routes = [
    {
      path: '/meeting/:roomId',
      name: 'meeting',
      component: meeting,
      meta: {
        backgroundColor: colors.transparent,
      }
    },
    // 其他路由按需配置对应meta.backgroundColor即可
    {
      path: '/home',
      name: 'home',
      component: () => import('../components/Home.vue'),
      meta: {
        backgroundColor: '#ffffff',
      }
    }
  ]
  const router = new VueRouter({
    routes
  });
  
  // 新增全局路由守卫逻辑
  router.beforeEach((to, from, next) => {
    // 优先读取当前路由配置的背景色，无配置则使用默认背景色
    const targetBgColor = to.meta?.backgroundColor ?? '#f5f5f5'
    // 可根据实际需要修改绑定的DOM节点，比如App.vue的根容器、html标签等
    document.body.style.backgroundColor = targetBgColor
    next()
  })
  
  export default router
  

• 方案二：单页面组件内单独配置，适合仅少数页面需要特殊背景色的场景
  无需修改路由配置，直接在对应页面组件的生命周期钩子中设置背景色，离开页面时重置即可：

  <!-- meeting.vue 文件 -->
  <script>
  export default {
    // 页面创建时设置专属背景色
    created() {
      document.body.style.backgroundColor = 'transparent'
    },
    // 页面销毁前重置为全局默认背景色
    beforeDestroy() {
      document.body.style.backgroundColor = '#f5f5f5'
    }
  }
  </script>
  

注意：如果页面内容高度不足撑满整个视口，需要提前给html、body设置height: 100%的样式规则，否则背景色可能仅显示部分区域。

内容的提问来源于stack exchange，提问作者David Asturizaga Orias