如何从组件/模板中获取当前的 nuxt 布局？答案

【问题标题】：How to get the current nuxt layout from within a component/template?如何从组件/模板中获取当前的 nuxt 布局？
【发布时间】：2021-10-07 21:21:17
【问题描述】：

Nuxt 提供了一种在组件中动态设置layout 的方法，但是有没有一种方法可以从<template> 中确定正在使用的布局，例如v-if="layout === 'me'"?例如，我想使用单个路由 /c/dream 并为经过身份验证的用户提供一种布局，为未经过身份验证的用户提供另一种布局。如果我可以从模板中确定正在使用的布局，那么我可以根据布局构建 HTML。我已经检查了组件中的 this 对象，但没有看到确定正在使用哪个布局的方法。

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

一种方法是依靠 Vue 提供/注入功能将此信息传递给所有子组件。

您的布局将提供布局的名称：

// layouts/authenticated.vue
export default {
  provide() {
    return { layout: "authenticated" };
  },
};

您的页面组件或任何子组件都可以注入layout 以确定当前正在使用的布局。

pages/c/dream.vue

<template>
  <div>
    <div v-if="layout == 'authenticated'">
      <!-- custom UI for authenticated users -->
    </div>
  </div>
</template>

<script>
export default {
  // Determines which layout is currently in use
  inject: ["layout"],

  // Decide which layout to use
  // based on Nuxt context as an example
  layout(context) {
    return context.user ? "authenticated" : "default";
  },
};
</script>

我不得不承认，为了设置我们想要使用的布局而实现 layout(context) 并且必须注入 layout 来访问同一组件中的值，这很奇怪。 p>

【讨论】：