如何检查页面组件是否具有指定的definePageMeta布局？

Question

我已经根据当前用户使应用程序的页面布局动态化。但我想检查当前页面是否已明确定义其布局，以便它永远不会被下面的

watchEffect

覆盖。

（应用程序.vue）

<template>
  <NuxtLayout>
    <NuxtPage />
    <ToastNotification></ToastNotification>
  </NuxtLayout>
</template>

<script lang="ts" setup>
const globalStore = useGlobal();
const { user } = storeToRefs(globalStore);


onMounted(() => {
  watchEffect(() => {
    switch (user.value?.role) {
      case 'instructor':
        setPageLayout('instructor');
        break;
      case 'student':
        setPageLayout('student');
        break;
      default:
        setPageLayout('default');
        break;
    }
  });
})
</script>

（页面/someOtherPage.vue）

<template>
  This should always be rendered in default layout.
</template>

<script setup>
definePageMeta({
  layout: 'default',
})
</script>

Answer 1

能够利用

useRoute

来实现此目的。

  watchEffect(() => {
    const route = useRoute()
    // `false` is a possible value also which is equivalent to 'default'.
    if (route.meta.layout || route.meta.layout === false) {
      // Do not override explicitly definded layouts.
      return;
    }

    switch (user.value?.role) {
      case 'instructor':
        setPageLayout('instructor');
        break;
      case 'student':
        setPageLayout('student');
        break;
      default:
        setPageLayout('default');
        break;
    }
  });

注意，

setPageLayout

也会更新

meta.layout

。因此，您必须根据行为仔细管理动态布局逻辑。

（让帖子开放一段时间，不投票我的答案，以允许更好的替代解决方案。）