vue.js - 子级使用与父级不同的布局

Question

在 Nuxt 如何使用来自父级的不同布局

前任。
_profile
page a
page b
Profile Use Layout A
so Automaticallay Page a 和 Page b 使用 layout a
但我想在 page a 和 page b 中使用 layout B

标签： vue.jsnuxt.js

Answer 1

如何使用来自父级的不同布局

首先，在文件夹内创建一个新的布局 B，layouts如：

布局b.vue

<template>
  <div class="layoutb">
    <Nuxt />
  </div>
</template>

接下来，我们可以使用layout页面组件中的键 ( pagea.vue& pagea.vue) 来定义要使用的布局：

页面.vue

export default {
  layout: 'layoutb',
  ...
}

pageb.vue

export default {
  layout: 'layoutb',
  ...
}

现在您将看到使用布局 B 而不是布局 A 的页面 a 和页面 b。