nuxt3 自定义布局

nuxt3 自定义布局

需要使用definePageMeta配置页面

创建文件夹

在src下创建一个layouts文件夹，新建一个文件【自定义的名称】.vue，我这里叫custom.vue，这里的名称关系到definePageMeta的配置

<script setup lang="ts"></script>

<template>
    <div class="common-layout h-100">
        <el-container class="h-100">
            <el-aside width="200px">
                <Aside />
            </el-aside>
            <el-container>
                <el-header class="bg-color-fff border-b">
                    <Header />
                </el-header>
                <el-scrollbar height="100%">
                    <el-main>
                        <!-- 最主要的部分，其它可以都删除，这里使用的是 element-plus 的layout布局 -->
                        <slot />
                    </el-main>
                </el-scrollbar>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped lang="scss"></style>

修改app.vue文件

<script setup lang="ts">
definePageMeta({
    // 【自定义的名称】
    layout: 'custom',
});
</script>

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

配置definePageMeta

我需要这种布局，在需要布局的页面配置definePageMeta，比如：menu.vue

<script setup lang="ts">
definePageMeta({
    layout: 'custom'
});
</script>

<template>
    <div></div>
</template>

<style scoped lang="scss"></style>

我不需要这种布局，在不需要布局的页面配置definePageMeta，比如：login.vue

<script setup lang="ts">
definePageMeta({
    layout: false
});
</script>

<template>
    <div></div>
</template>

<style scoped lang="scss"></style>