NuxtLayout组件name属性无响应式问题排查求助

核心问题 #

NuxtLayout 组件默认不会在 name 属性变化时自动重新渲染对应的布局组件——它会缓存已加载的布局实例，因此即使你的 layoutName 计算属性是响应式的，布局也不会随断点切换而更新。

另外你的代码存在一个小疏漏：未导入 useBreakpoints 方法，这会导致运行时错误，需要先补上。

修复代码 #

<script setup lang="ts">
import { computed } from "vue";
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"; // 补上 useBreakpoints 导入

const breakpoints = useBreakpoints(breakpointsTailwind);

const layoutName = computed(() =>
  breakpoints.smaller("md") ? "sidenav-mobile" : "sidenav-desktop",
);
</script>

<template>
  <div>
    {{ breakpoints.smaller("md") }} <!-- 响应式正常 -->
    <NuxtLayout :name="layoutName" :key="layoutName"> <!-- 添加 key 绑定 -->
      <template #links>
        <slot name="links"></slot>
      </template>
    </NuxtLayout>
  </div>
</template>

原理说明 #

给 NuxtLayout 添加 :key="layoutName" 后，当 layoutName 变化时，Vue 会识别到这是一个全新的组件实例，会自动卸载旧的布局组件并挂载新的布局组件，从而实现断点切换时的布局实时更新。

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