Vue 3：如何仅在特定页面中更改正文背景颜色

Question

在 vue 3 中，我只需要在访问登录页面时更改正文背景颜色。

我的index.html是：

<body class="body">
 
   <div id="app"></div>
   <!-- built files will be auto injected -->

</body>

如何从组件或 vue 路由器更改主体背景颜色？

Answer 1

在 App 组件中，如果路由与您想要的路由匹配，您可以在顶级元素上放置一个条件 class。只要您的顶级元素是主体的全高和全宽。

<template>
  <div class="background" :class="{ otherColor: isSignIn }">
    <div id="app"></div>
  </div>
</template>

<script>
export default {
  computed: {
    isSignIn() {
      return this.$route.path === '/signIn';
    }
  }
}
</script>

<style>
.background {
  height: 100vh;
  width: 100vw;
  background-color: #ffffff;
}

.otherColor {
  background-color: #d4d4d4; // whatever background color you want.
}
</style>

Vue 3：如何仅在特定页面中更改正文背景颜色

Vue 3: how to change body background color only in specific page

vue.js

vue-router