如何禁用其他页面上的默认布局答案

【问题标题】：How disable default layout on other page如何禁用其他页面上的默认布局
【发布时间】：2019-09-27 12:37:42
【问题描述】：

我在 NUXT 上的布局默认页面有问题。我创建了一个新页面，但默认情况下，nuxt 使用 layout/default.vue。我不喜欢使用默认布局页面。

如果您对我的问题有解决方案。谢谢你:)

我试过layout: 'none'

【问题讨论】：

【解决方案1】：

如果您真的不想要布局，请创建一个名为“/layouts/empty.vue”的布局，如下所示：

<template>
  <nuxt />
</template>

在您的页面中指定它：

<script>
export default {
  layout: "empty"
};
</script>

【讨论】：

【解决方案2】：

你有两个选择：

1- 您可以修改 layout/default.vue 以使其适应您的偏好。

2- 您可以为您的页面创建自定义布局。

取决于你的意图。请记住，layouts/default.vue 文件将用于所有未指定布局的页面。因此，如果您为网站中最常见的页面类型保留该布局，则效果会更好。

对于您计划添加到网站的其余页面，您可以使用自定义布局。您需要在项目的 layouts 文件夹中创建每一个。

您将在此处找到带有示例的详细说明： https://nuxtjs.org/guide/views#layouts

祝你的项目好运。不要放弃！

【讨论】：

【解决方案3】：

几点说明

// error.vue
<script>
export default {
  layout: "empty"
};
</script>

在上面的片段中，当您将布局指定为“空”时，这并不意味着页面将在没有任何布局的情况下加载。不！... 相反，nuxt 将在布局文件夹中查找名为 empty.vue 的文件，如果它不可用，则页面将回退到 default.vue 的布局。

【讨论】：

【解决方案4】：

您可以修改默认布局以适应您的目的

或

您可以在 Nuxt 中进行任何自定义布局。

然后像下面这样改变你的布局

布局：'custom_layout'

您可以查看来自here 的示例。

【讨论】：

【解决方案5】：

另一种方法是在 nuxt.config.js 中添加这一行，这样如果你不提供布局，它就会退回到 empty.vue：

 layouts: {
    default: '~/layouts/empty.vue',
  },

然后按照上面的方法创建 empty.vue 并且只在你想要的组件中使用你需要的布局。

【讨论】：