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

Question

我是一个 Nuxt.js 的初学者，正在将一个Vue项目转换成Nuxt.js，并想在一个页面上使用两个布局（默认和另一个）。逻辑如下： 第一个布局是所有页面都有的（默认）标题栏，第二个布局是设置栏。
在设置页面中，我有3个路由（请参见此处的项目结构：image）：

1. settings/avatar
2. settings/account
3. settings/about

我希望三个路由的 设置栏 都相同。 我可以像这样将设置栏添加到所有三个子页面中： layout: 'settings-bar' 但是就不能设置标题栏布局了。 在我的Vue项目中，我只在设置页面中使用了设置栏组件，在下面使用了<router-view></router-view>来更改组件。 有任何想法吗？ 在文档中找不到任何内容。 查看其他屏幕截图以更好地理解：

- sycamore55

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

- kissu

---

这将导致default-layout在路由之间转换时每次重新渲染，包括不同的“子”布局。我想知道在Nuxt中是否有可能有一个包装器布局而不需要重新渲染，例如全局组件如通知列表、带有用户信息的标题等。 - markoffden

最后，使用一个简单的组件可能更简单和更干净。嵌套布局也有点像是一种 hack。@markoffden - kissu

Answer 2

一个页面中无法使用多个布局。但是，您所描述的内容可以通过Child Components来管理。

- Avraham

---

感谢您的帮助，我设法修复了它，文件夹结构：链接 并在 settings.vue 中放置 <nuxt-child />。 - sycamore55

这是一个排序问题。布局包含页面，页面包含组件。因此，在单个页面中拥有多个布局是没有意义的：页面中从来没有任何布局，而是页面在布局内部。正如答案所建议的那样，请查看组件。 - n-smits

可以做到，查看我的答案以了解如何。 - kissu