vue.js 如何防止Nuxt 3默认布局渲染？

5anewei6 于 2022-11-25 发布在 Vue.js

关注(0)|答案(1)|浏览(301)

因为nuxt 3文档是codesandbox，没有解释任何内容，根据nuxt 2文档，default layout应该被<nuxt-layout>组件的name属性中指定的任何布局替换，但对我来说，两种布局都是呈现的。

layouts/default.vue：

<template>
  <div>
    <p>default layout</p>
    <slot/>
  </div>
</template>

layouts/custom.vue：

<template>
  <div>
    <p>custom layout</p>
    <slot/>
  </div>
</template>

pages/index.vue：

<template>
  <nuxt-layout name="custom">
    <p>hello world</p>
  </nuxt-layout>
</template>

如何在index.vue中仅呈现custom布局？

编辑：

我知道您可以通过将以下内容添加到组件来覆盖default layout：

<script setup>
definePageMeta({
  layout: "custom"
})
</script>

但是这个方法只分配了一个layout。我如何使用html版本-〉<nuxt-layout name="custom"/>而不呈现default layout呢？这样就可以在一个组件中有多个布局。在docs中，它显示它应该工作，但对我来说它不工作

vue.js

来源：https://stackoverflow.com/questions/74514922/how-to-prevent-nuxt-3-default-layout-from-rendering

1条答案

按热度按时间

ruarlubt1#

在页面中，将其添加到脚本中。有关详细信息，请访问nuxt3-layouts。

~/页面/ Jmeter 板.vue

<script setup>
definePageMeta({
  layout: "dashboard",
});
</script>

~/页/索引.版本

<script setup>
definePageMeta({
  layout: "default",
});
</script>

更新日期：

禁用页面的默认布局，改为使用内置组件NuxtLayout并为其添加名称。
另外，不要忘记使用app.vue和NuxtPage。这将有助于更改布局。请查看。

~页/ Jmeter 板.vue

<template>
  <div>
      <NuxtLayout name="dashboard">
          <p style="color: red">This is dashboard</p>
      </NuxtLayout>
  </div>
</template>

<script setup>
definePageMeta({
  layout: false,
});
</script>

应用程序版本

<template>
  <div>
      <NuxtLayout>
          <NuxtPage/>
      </NuxtLayout>
    </div>
</template>

赞(0）回复(0）举报 2022-11-25

我来回答

vue.js 如何防止Nuxt 3默认布局渲染？

1条答案

更新日期：

相关问题

热门标签

最新问答