Nuxt 3中间件导航后布局未更新：登录布局未正常应用

数据老陈

2026-7-21

解决Nuxt3中间件重定向后布局不更新的问题

先确认页面布局的配置是否正确

确保登录页面（sign-in.vue）已经通过definePageMeta明确指定专属布局，比如：

<script setup>
definePageMeta({
  layout: 'auth' // 对应你定义的登录布局文件 ~/layouts/auth.vue
})
</script>

同时检查其他页面（比如受保护的protected.vue）使用的是默认布局或其他布局，比如：

<script setup>
definePageMeta({
  layout: 'default' // 对应 ~/layouts/default.vue
})
</script>

检查中间件中的异步逻辑（如果有）

如果你的authStore.checkAuth()是异步函数（比如调用后端接口验证token），原代码中没有等待异步操作完成就判断isAuthenticated，会导致重定向时机错误，进而影响布局切换。修改中间件为异步：

import { useAuthStore } from "~/stores/auth";

export default defineNuxtRouteMiddleware(async (to, from) => {
  const authStore = useAuthStore();
  // 等待认证检查完成再执行后续逻辑
  await authStore.checkAuth();

  if (to.path === "/protected") {
    if (!authStore.isAuthenticated) {
      return navigateTo("/sign-in");
    }
  }
});

避免服务器端直接返回（可选）

原代码中if (process.server) return会跳过服务器端的重定向处理，可能导致客户端导航后布局状态不一致。如果你的认证逻辑可以兼容服务器端，建议移除这个判断，让中间件在服务端也能执行重定向，确保路由状态一致：

import { useAuthStore } from "~/stores/auth";

export default defineNuxtRouteMiddleware(async (to, from) => {
  const authStore = useAuthStore();
  await authStore.checkAuth();

  if (to.path === "/protected" && !authStore.isAuthenticated) {
    return navigateTo("/sign-in");
  }
});