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

Question

我的 layouts/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 组件，但在其他页面中 (/about) 我想显示这些组件。

我已经知道找到 URL 并像这样使用手表：

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

它确实有效，但我正在寻找更好的答案，也许更合乎逻辑。

Answer 1

没有什么特别的魔法，在每个组件上使用条件，否则没有更干净的方法（这里不需要 over-engineer）。

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

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

Toggling components depending of the current path in Nuxt

layout

routes

vue.js

vue-router

nuxt.js