Nuxt 2的Anonymous Middleware在Nuxt 3中最接近的等效实现是什么

Nuxt 3 完全支持和 Nuxt 2 体验一致的匿名中间件实现，不需要额外调用API端点，操作流程和Nuxt 2 同样简便。

核心实现方式 #

Nuxt 3 中将页面级配置统一收敛到了definePageMeta宏中，匿名中间件直接在该配置项内声明即可，仅对当前页面生效，无需在middleware目录下单独创建文件：

<script setup>
definePageMeta({
  // 直接传入函数即为匿名中间件
  middleware: (to, from) => {
    // 示例逻辑：未登录状态跳转到登录页
    const userToken = useCookie('user_token')
    if (!userToken.value && to.path !== '/login') {
      return navigateTo('/login')
    }
  }
})
</script>

如果需要为当前页面配置多个匿名中间件，直接传入函数数组即可：

<script setup>
definePageMeta({
  middleware: [
    (to, from) => {
      console.log('第一个匿名中间件执行')
    },
    (to, from) => {
      console.log('第二个匿名中间件执行')
    }
  ]
})
</script>

常见疑问澄清 #

• 不需要调用API端点：匿名中间件是Nuxt路由层的原生能力，在路由跳转阶段直接执行，无需额外对接API接口，需要调用API的方案属于特定业务场景的扩展需求，不是实现匿名中间件的必要步骤。
• 和Nuxt 2的差异仅在写法：本质逻辑和Nuxt 2的页面内匿名中间件完全一致，只是适配了Nuxt 3的组合式API规范，并没有增加使用复杂度。
• 中间件内可以正常使用所有Nuxt 3 组合式工具，比如useCookie、useState、useRuntimeConfig等，和其他业务代码的用法没有区别。

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