NuxtJS添加多个命名路由中间件，第二个无法生效问题

问题分析 #

你遇到的问题是在插件中注册的第二个命名路由中间件未被Nuxt识别，导致报错Unknown route middleware: 'guard-already-logged-in'。核心原因是在插件中批量注册命名中间件存在注册时机或识别逻辑的兼容性问题，而Nuxt3推荐使用约定式目录来管理路由中间件，这种方式更稳定可靠。

解决方案 #

1. 改用约定式中间件目录 #

Nuxt3会自动扫描项目根目录下的middleware文件夹，将其中的文件作为命名路由中间件注册，无需手动在插件中添加：

• 在项目根目录创建middleware文件夹
• 分别创建两个中间件文件（后缀加.client.ts确保仅在客户端执行，避免服务端无法获取$auth的错误）：

middleware/guard-secret.client.ts

export default defineNuxtRouteMiddleware(() => {
  const { $auth } = useNuxtApp();
  if (!$auth?.currentUser?.uid) {
    return navigateTo('/');
  }
});

middleware/guard-already-logged-in.client.ts

export default defineNuxtRouteMiddleware(() => {
  const { $auth } = useNuxtApp();
  if ($auth && $auth.currentUser?.email === "xxx") {
    return navigateTo('/admin/');
  }
});

2. 移除插件中的中间件注册代码 #

删除plugins/guard-secret.ts文件，因为Nuxt会自动加载middleware目录下的中间件，无需手动注册。

3. 修正页面文件名错误 #

你的报错页面文件名是admin/login.value，这是拼写错误，改为admin/login.vue才能被Nuxt正确识别为页面组件。

4. 保留原有页面的中间件配置 #

页面中的definePageMeta配置无需修改，依然可以正常使用：

<script setup lang="ts">
definePageMeta({
  middleware: ["guard-already-logged-in"],
});
</script>

补充说明 #

• 约定式目录管理是Nuxt3的最佳实践，相比插件注册更稳定，也便于后续维护和扩展。
• 给中间件文件名加上.client.ts后缀，是因为$auth来自客户端专属插件，服务端环境下无法获取该对象，这样可以避免服务端执行中间件时出现额外错误。

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