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

Question

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

Answer 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才能访问同一组件中的值，实现起来很奇怪。