我在NUXT上的布局默认页有问题。我创建了一个新页面,但默认情况下,nuxt使用layout/default. vue。我不喜欢使用默认的布局页面。如果你有办法解决我的问题。谢谢你:)我试过layout: 'none'
layout: 'none'
ercv8c1e1#
如果你真的不想要一个布局,创建一个名为“/layouts/empty.vue”的布局,看起来像这样:
/layouts/empty.vue
<template> <nuxt /> </template>
字符串在页面中使用以下命令指定:
<script> export default { layout: "empty" }; </script>
型
vom3gejh2#
您有两种选择:1-您可以修改 layout/default.vue 以适应您的偏好。2-您可以为页面创建自定义布局。取决于你的意图。请记住,***layouts/default.vue***文件将用于所有未指定布局的页面。因此,如果您在网站中保留最常见类型的页面布局,则会更好。对于您计划添加到站点的其余页面,您可以使用自定义布局。您将需要在项目的layouts文件夹中创建每一个。在这里,您将找到详细的解释和示例:https://nuxtjs.org/guide/views#layouts祝你的项目好运。不要给予!
7xllpg7q3#
几点把事情说清楚1.所有页面都将使用layoutdefault.vue加载1.如果您已经为页面指定了布局,则将使用指定的布局加载该页面。1.如果指定的布局不可用,那么页面将加载default.vue1.如果nuxt在layouts文件夹中没有看到名为default.vue的文件,那么页面将加载到空布局中1.没有什么比layout: "empty"
layout: "empty"
// error.vue <script> export default { layout: "empty" }; </script>
字符串在上面的截图中,当你指定布局为“空”时,这并不意味着页面将在没有任何布局的情况下加载。nuxt会在layout文件夹中查找名为empty.vue的文件,如果该文件不可用,则页面将回退到default.vue的布局。
hts6caw34#
您可以修改默认布局以适合您的用途或者是您可以在Nuxt中创建任何自定义布局。然后像下面这样改变你的布局布局:'custom_layout'你可以看到here的示例。
gjmwrych5#
另一种方法是将这一行添加到nuxt.config.js中,这样如果你不提供布局,它福尔斯到empty.vue:
layouts: { default: '~/layouts/empty.vue', },
字符串然后按照上面的方法创建空的.vue,并且只使用你想要的组件中需要的布局。
1zmg4dgp6#
如果您不希望在特定页面中使用布局,请使用此布局
<script setup> definePageMeta({ layout: false, }); </script>
字符串或布局文件夹中的任何其他布局
<script setup> definePageMeta({ layout: "custom_layout", }); </script>
*备注:
这在<script setup>和<script>中都有效
<script setup>
<script>
6条答案
按热度按时间ercv8c1e1#
如果你真的不想要一个布局,创建一个名为“
/layouts/empty.vue
”的布局,看起来像这样:字符串
在页面中使用以下命令指定:
型
vom3gejh2#
您有两种选择:
1-您可以修改 layout/default.vue 以适应您的偏好。
2-您可以为页面创建自定义布局。
取决于你的意图。请记住,***layouts/default.vue***文件将用于所有未指定布局的页面。因此,如果您在网站中保留最常见类型的页面布局,则会更好。
对于您计划添加到站点的其余页面,您可以使用自定义布局。您将需要在项目的layouts文件夹中创建每一个。
在这里,您将找到详细的解释和示例:https://nuxtjs.org/guide/views#layouts
祝你的项目好运。不要给予!
7xllpg7q3#
几点把事情说清楚
1.所有页面都将使用layoutdefault.vue加载
1.如果您已经为页面指定了布局,则将使用指定的布局加载该页面。
1.如果指定的布局不可用,那么页面将加载default.vue
1.如果nuxt在layouts文件夹中没有看到名为default.vue的文件,那么页面将加载到空布局中
1.没有什么比
layout: "empty"
字符串
在上面的截图中,当你指定布局为“空”时,这并不意味着页面将在没有任何布局的情况下加载。nuxt会在layout文件夹中查找名为empty.vue的文件,如果该文件不可用,则页面将回退到default.vue的布局。
hts6caw34#
您可以修改默认布局以适合您的用途
或者是
您可以在Nuxt中创建任何自定义布局。
然后像下面这样改变你的布局
布局:'custom_layout'
你可以看到here的示例。
gjmwrych5#
另一种方法是将这一行添加到nuxt.config.js中,这样如果你不提供布局,它福尔斯到empty.vue:
字符串
然后按照上面的方法创建空的.vue,并且只使用你想要的组件中需要的布局。
1zmg4dgp6#
如果您不希望在特定页面中使用布局,请使用此布局
字符串
或布局文件夹中的任何其他布局
型
*备注:
这在
<script setup>
和<script>
中都有效