Nuxt3中如何为父路由及子路由统一配置Auth中间件

问题 #

我正在开发首个Nuxt3应用，希望为某一特定路由及其所有子路由添加Auth认证中间件。是否必须在每个子路由中添加如下代码？

definePageMeta({
    layout: "default",
    name: "become-a-pro",
    middleware: "auth",
});

能否仅在父路由中配置，让所有子路由自动继承该Auth中间件？我的文件夹/文件结构如下：

----- parent
     |--- children 1
          |--- children 1a
          |--- children 1b
     |--- children 2
          |--- children 2a
          |--- children 2b
     |--- children 3
          |--- children 3a
          |--- children 3b

解决方案 #

不需要在每个子路由里重复配置，以下两种方法都能实现父路由中间件自动被子路由继承：

方法一：父页面配置中间件（推荐） #

直接在父路由对应的页面文件（比如parent/index.vue）中添加definePageMeta配置，所有子路由会自动继承该中间件：

<script setup>
definePageMeta({
  middleware: "auth"
});
</script>

这种方式和你原本的写法一致，操作直观。如果子路由自身配置了middleware，会和父路由的中间件合并执行（比如子路由配置middleware: ['another']，最终会依次执行auth和another）。

方法二：通过路由规则批量配置 #

如果需要更灵活的路由匹配控制，可以在nuxt.config.ts中使用routeRules指定匹配/parent/**的所有路由应用auth中间件：

export default defineNuxtConfig({
  routeRules: {
    '/parent/**': { middleware: 'auth' }
  }
})

这种方式无需修改任何页面文件，适合批量配置路由规则的场景。

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