Nuxt 3 技术咨询：如何在布局中使用路由中间件？是否可行？

你好！Nuxt 3当然支持路由中间件，但你之前的写法存在一个关键问题：definePageMeta仅能在页面组件（pages/目录下的文件）中使用，布局组件并不支持这个宏，所以你在Admin.vue里配置的中间件不会被触发。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：通过路由规则批量应用中间件（最推荐） #

如果所有需要使用Admin布局的页面都集中在/admin/路径下，你可以在nuxt.config.ts中配置routeRules，自动给匹配的路由应用中间件，不用每个页面重复写配置：

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // 匹配所有/admin开头的路由
    '/admin/**': {
      middleware: 'admin-auth'
    }
  }
})

之后，你只需要在每个admin页面中指定布局即可：

<!-- pages/admin/dashboard.vue 示例 -->
<template>
  <!-- 页面内容 -->
</template>
<script lang="ts">
definePageMeta({
  layout: 'admin'
})
</script>

方案2：在每个Admin页面中单独配置中间件 #

如果你的admin页面路径不统一，或者需要更精细的控制，可以在每个使用Admin布局的页面中直接配置中间件：

<!-- pages/admin/settings.vue 示例 -->
<template>
  <!-- 页面内容 -->
</template>
<script lang="ts">
definePageMeta({
  layout: 'admin',
  middleware: 'admin-auth'
})
</script>

补充：完善你的中间件逻辑 #

你目前的中间件仅做日志打印，这里给你补充登录状态校验的示例（假设你用Pinia管理登录状态）：

// middleware/admin-auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  // 获取登录状态（根据你的实际状态管理方式调整）
  const authStore = useAuthStore()
  
  if (!authStore.isLoggedIn) {
    // 未登录时跳转到登录页，同时记录当前路由以便登录后返回
    return navigateTo({
      path: '/login',
      query: { redirect: to.fullPath }
    })
  }
  
  console.log('已通过Admin权限校验')
})

注意：确保你的中间件文件放在middleware/目录下，文件名使用kebab-case（比如admin-auth.ts），这样Nuxt才能自动识别并注册它。

内容的提问来源于stack exchange，提问作者Angelo Schuler Piletti