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

Answer 2

没有办法在一页上有多个布局。但是，您所描述的内容可以通过 Child Components 进行管理。