useLayout v4.5

Source
useLayout 返回当前路由解析得到的布局。

描述

useLayout 返回一个计算属性 ref，用于获取当前路由已解析的布局，使用与 <NuxtLayout> 相同的链路：首先是页面的 layout 元信息，其次是通过 路由规则 设置的 appLayout，然后是 'default'。

在已渲染的 <NuxtLayout> 内部，它反映的是外层布局；在其外部（例如在 app.vue 中），它返回的是当前路由将会解析得到的布局。

与直接读取 route.meta.layout 不同，这会考虑通过路由规则设置的布局，并且会随着路由变化保持同步。

返回值

一个只读的计算型 ref，解析为布局名称（一个 string），或在布局被禁用时为 false。

app.vue
<script setup lang="ts">
const layout = useLayout()
</script>

<template>
  <div>
    <CommandPalette v-if="layout !== 'minimal'" />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>