根据NUXT中当前路径的切换组件切换

Question

我的布局/default.vue看起来像这样：

<template>
  <v-app style="background-color: transparent; color: unset">
    <v-main>
      <ActHeader></ActHeader>
      <Nuxt
        v-if="
          !$nuxt.isOffline ||
          $route.name == 'profile-downloads' ||
          $route.name == 'profile-downloads-id'
        "
        style="min-height: 300px"
      />
      <Footer />
    </v-main>
  </v-app>
</template>

<script>
import Footer from '@/components/Footer.vue'

export default {
  components: {
    Footer,
  },
  async fetch() {
    await this.$store.dispatch('store/retrieveSettings')
    await this.$store.dispatch('store/retrieveMenus')
  },
}
</script>

我不想显示actheader和footer comptents components 到第一页（> /），但是在其他页面（about）中，我想显示这些组件。

---

我已经知道发现URL并使用这样的手表：

watch: {
  $route (to, from) {
    //false actHeader and Footer Components!
  }
} 

实际上它在工作，但是我正在寻找一个更好的答案，也许是更合乎逻辑的答案。

Answer 1

没有特殊的魔术，在每个组件上使用有条件的魔术，也没有更清洁的方法（无需在此处过度工程师）。

<template>
  <div>
    <act-header v-if="$route.name !== 'index'"></act-header>
    <nuxt />
    <footer-comp v-if="$route.name !== 'index'"></footer-comp>
  </div>
</template>