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

Question

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

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

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

Answer 1

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

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