Как добавить класс элементу, описанному в app, но в другом элементе router-view во vue 3?

Question

[stanislavkm]

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

Есть такая структура и при подстановке в router-view определенной страницы нужно, чтобы к хэдеру и футеру подставлялся определенный класс. Каким образом это можно реализовать?

Answer 1

[LJ322]

Через computed свойство

<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>