如何从 component/template 中获取当前的 nuxt 布局？

Question

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

Answer 1

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

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

// 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 以访问相同的值是很奇怪的组件。

如何从 component/template 中获取当前的 nuxt 布局？

How to get the current nuxt layout from within a component/template?

vue.js

nuxt.js