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

with vue 3 i need to change the body background color only when i visit a signin page.

My index.html is:

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

</body>

How can i change the body background color from a component or from vue router?

CodePudding user response：

In the App component you can put a conditional class on the top level element if the route matches your desired route. As long as your top level element is full height and width of the body.

<template>
  <div  :>
    <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>