vue.js - Nuxt.js - 在页面中添加两个布局

Question

我是 Nuxt.js 的初学者，我正在将一个 Vue 项目转换为 Nuxt.js，我想在一个页面上使用两种布局(默认布局和另一种布局)。逻辑是这样的: 第一个布局是所有页面上的(默认)或标题，第二个布局是设置栏。
在 settings 页面中，我有 3 条路线(请参阅此处的项目结构:image):

1. 设置/头像
2. 设置/帐户
3. 设置/关于

我希望 设置栏 对三个路线相同。我可以将设置栏添加到所有三个子页面，例如:layout: 'settings-bar'但随后无法设置页眉布局。在我的 Vue 项目中，我只在设置页面中使用:设置栏组件及以下 <router-view></router-view>更改组件。知道我该怎么做吗？在文档中找不到任何东西。在此处查看其他屏幕截图以更好地理解:

Answer 1

同时，在 Nuxt 中使用嵌套布局实际上是可行的:它有点 hacky 且难以阅读，我不确定我是否会在更大的范围内推荐它。试过了，不推荐，但如果真的需要，这里是解决方案。

layouts/default.vue

<template>
  <div>
    <nuxt v-if="!$slots.default" />
    <slot />
  </div>
</template>

layouts/newLayout.vue

<template>
  <default-layout>
    <h1>Surrounding layout</h1>
    <nuxt />
  </default-layout>
</template>

<script>
import DefaultLayout from '~/layouts/default.vue';

export default {
  components: {
    DefaultLayout
  }
}
</script>

然后，您可以在任何地方使用它

<script>
export default {
  layout: 'newLayout' // name of your new layout
}
</script>

感谢这篇文章:https://constantsolutions.dk/2020/02/nested-layouts-in-nuxt-vue-js/

不确定，但文章本身可能来自此 github 帖子:https://github.com/nuxt/nuxt.js/issues/785#issuecomment-422365721