是否可以有条件地渲染布局?

我想根据以下条件更改组件中的布局:

<template>
  <layoutA>
    //component contents
  </layoutA>
</template>

为此:

<template>
  <layoutB>
    //component contents
  </layoutB>
</template>

我知道如何使用条件渲染组件的唯一方法是使用 v-if 如果不满足条件,则不会渲染子组件。我可以这样做:

<template>
  <layoutA v-if="condition">
    //component contents
  </layoutA>
  <layoutB v-else>
    //component contents
  </layoutB>
</template>

但是对于大型组件,这很快就会变得混乱+我必须两次维护相同的代码。可以通过移动来简化 //component contents 并导入两次。有没有更优雅的方法?

这是一个 layout :

<template>
  <v-nav/>
  <slot/>
  <v-footer/>
</template>