如何为目录中的所有页面设置nuxtjs布局？

Question

我的网站公共部分有不同的布局，管理区域也有不同的布局。

目前我正在使用

definePageMeta({layout: 'admin'})

如何为pages/admin目录中的所有页面或基于路由admin、admin/**设置管理布局，而不必为每个页面单独指定它？

Answer 1

如果我正确理解你的问题，可以通过调用

NuxtLayout

内页路由来实现，就像这样。

admin 文件夹内的任何路由都将具有 admin 布局

~/pages/admin.vue

<template>
  <div>
    <NuxtLayout name="admin">
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

Pages 目录示例将是这样的。 admin文件夹内的

index.vue

是您的管理页面内容。

管理布局示例。

~/layouts/admin.vue

<script lang="ts" setup>

</script>
<template>
  <div>
    <h1>Admin Layout</h1>
    <div>
      <slot />
    </div>
  </div>
</template>
<style scoped lang="css"></style>

希望这有帮助。已测试，有效

Answer 2

要将“admin”布局应用于 NuxtJS 项目中“pages/admin”目录中的所有页面而不单独设置，只需在

middleware

目录中创建一个

pages/admin

即可。在此中间件中，检查路线并使用

definePageMeta({ layout: 'admin' })

设置布局。您还可以在

admin.vue

目录中命名布局文件

layouts

，如果您正确遵循命名约定，Nuxt 会自动将其应用到“admin”目录下的所有页面。这样，您就不需要手动设置每个页面的布局。