Nuxt.js

Question

我是 Nuxt.js 的初学者，我正在将一个 Vue 项目转换为 Nuxt.js，我想使用两种布局（默认布局和另一个）在一页上。逻辑是这样的：第一个布局是所有页面上的（默认）或 header，第二个布局是 设置栏 。
在设置页面我有3条路线（见这里的项目结构：image）：

settings/avatar
settings/account
settings/about

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

Answer 1

没有办法在一个页面上有多个布局。但是，您所描述的内容可以使用 Child Components.

进行管理

Answer 2

在 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 post：https://github.com/nuxt/nuxt.js/issues/785#issuecomment-422365721

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

Nuxt.js - Add two layouts in page

vue.js

vue-router