如何在Nuxt的组件或template中获取当前正在使用的layout？

分两种版本的实现方式：

Nuxt 3 实现 #

Nuxt 3 中 layout 配置默认挂载在路由 meta 属性上，直接通过响应式的 useRoute() 即可获取，无需额外配置：

1. 组件内直接获取使用：

<template>
  <!-- 直接判断layout值 -->
  <div v-if="useRoute().meta.layout === 'me'">
    仅 me 布局下展示的内容
  </div>
  <div v-else>
    其他布局下展示的内容
  </div>
</template>

如果需要频繁使用，可以封装为计算属性简化调用：

<script setup>
const currentLayout = computed(() => useRoute().meta.layout || 'default')
</script>

<template>
  <div v-if="currentLayout === 'me'">已认证用户内容</div>
</template>

针对同一路由不同身份对应不同 layout 的场景，可以通过全局中间件动态设置：

// middleware/auth.global.ts 全局中间件
export default defineNuxtRouteMiddleware((to) => {
  const userStore = useUserStore() // 替换为你自己的用户状态管理
  if (to.path === '/c/dream') {
    // 动态给当前路由设置layout
    to.meta.layout = userStore.isAuthenticated ? 'me' : 'default'
  }
})

Nuxt 2 实现 #

Nuxt 2 可以通过两种方式实现：

1. 路由 meta 取值：和 Nuxt 3 逻辑一致，动态设置 layout 时同步更新 $route.meta.layout，template 中直接通过 $route.meta.layout 判断即可

<template>
  <div v-if="$route.meta.layout === 'me'">已认证用户内容</div>
</template>

2. Provide/Inject 传值：如果 layout 没有挂载到路由 meta，可以在布局组件内注入标识：

<!-- layouts/me.vue -->
<script>
export default {
  provide() {
    return {
      currentLayout: 'me'
    }
  }
}
</script>

在页面组件内注入后直接使用：

<template>
  <div v-if="currentLayout === 'me'">已认证用户内容</div>
</template>
<script>
export default {
  inject: ['currentLayout']
}
</script>

内容的提问来源于stack exchange，提问作者Michael