vue.js 如何禁用其他页面的默认布局

cl25kdpy  于 2023-08-07  发布在  Vue.js
关注(0)|答案(6)|浏览(194)

我在NUXT上的布局默认页有问题。我创建了一个新页面,但默认情况下,nuxt使用layout/default. vue。我不喜欢使用默认的布局页面。
如果你有办法解决我的问题。谢谢你:)
我试过layout: 'none'

ercv8c1e

ercv8c1e1#

如果你真的不想要一个布局,创建一个名为“/layouts/empty.vue”的布局,看起来像这样:

<template>
  <nuxt />
</template>

字符串
在页面中使用以下命令指定:

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

vom3gejh

vom3gejh2#

您有两种选择:
1-您可以修改 layout/default.vue 以适应您的偏好。
2-您可以为页面创建自定义布局。
取决于你的意图。请记住,***layouts/default.vue***文件将用于所有未指定布局的页面。因此,如果您在网站中保留最常见类型的页面布局,则会更好。
对于您计划添加到站点的其余页面,您可以使用自定义布局。您将需要在项目的layouts文件夹中创建每一个。
在这里,您将找到详细的解释和示例:https://nuxtjs.org/guide/views#layouts
祝你的项目好运。不要给予!

7xllpg7q

7xllpg7q3#

几点把事情说清楚
1.所有页面都将使用layoutdefault.vue加载
1.如果您已经为页面指定了布局,则将使用指定的布局加载该页面。
1.如果指定的布局不可用,那么页面将加载default.vue
1.如果nuxt在layouts文件夹中没有看到名为default.vue的文件,那么页面将加载到空布局中
1.没有什么比layout: "empty"

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

字符串
在上面的截图中,当你指定布局为“空”时,这并不意味着页面将在没有任何布局的情况下加载。nuxt会在layout文件夹中查找名为empty.vue的文件,如果该文件不可用,则页面将回退到default.vue的布局。

hts6caw3

hts6caw34#

您可以修改默认布局以适合您的用途
或者是
您可以在Nuxt中创建任何自定义布局。
然后像下面这样改变你的布局
布局:'custom_layout'
你可以看到here的示例。

gjmwrych

gjmwrych5#

另一种方法是将这一行添加到nuxt.config.js中,这样如果你不提供布局,它福尔斯到empty.vue:

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

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

1zmg4dgp

1zmg4dgp6#

如果您不希望在特定页面中使用布局,请使用此布局

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

字符串
或布局文件夹中的任何其他布局

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

*备注:

这在<script setup><script>中都有效

相关问题