Changing styles only when a Vue component is rendered - vue.js

Question

I'm currently using vue-router to send us to an about page like so:
# #/views/About
<template>
<p>About Vue...</p>
</template>
<script>
[...]
</script>
<style>
</style>
The way routes are rendered are like so:
# #/App.vue
<template>
<Header />
<router-view>
</template>
<script>
import ...
</script>
<style>
header {
background: black;
}
</style>
Question:
How would I go about changing the header background color ONLY when I am on the About.vue (if i go to other routes like / or /contact header should stay the same)?
Thank you in advance for the help

Answer 1

Use a watcher or a computed property to watch your this.$route then conditionally apply a class or style based on if you're currently on the /about route. For example ..
# #/App.vue
<template>
<Header :class="[altBackground ? 'header-red' : 'header-black']" />
<router-view>
</template>
<script>
import ...
computed: {
altBackground() {
const path = this.$route.path.split('/')
return path[path.length-1].toLowerCase() === 'about'
}
}
</script>
<style>
.header-black {
color: black;
}
.header-red {
color: red;
}
</style>