How to add a class to an element described in app but in a different router-view element in vue 3?

Question

Vue.js

<template>
  <header>
...
  </header>
      <router-view/>
  <footer>
...
  </footer>
</template>

There is such a structure, and when substituting a certain page in the router-view, it is necessary that a certain class be substituted for the header and footer. How can this be implemented?

Answer 1

Via computed property

<template>
  <header :class="pageClass">
...
  </header>
      <router-view/>
  <footer :class="pageClass">
...
  </footer>
</template>

<script>
export default {
  computed: {
    pageClass() {
      return {
        'page-class': this.$route.path === '/page',
      }
    }
  }
}
</script>