如何为Nuxt.js中pages/admin目录下所有页面统一设置布局？

下面是几种不需要逐个页面设置的方法，根据你的Nuxt版本选合适的：

方案1：用Nuxt配置的routeRules（Nuxt 3+） #

直接在nuxt.config.ts里加路由规则，匹配所有/admin开头的路由，统一指定布局：

export default defineNuxtConfig({
  routeRules: {
    '/admin/**': { meta: { layout: 'admin' } }
  }
})

这样所有/admin及子路由都会自动用admin布局，不用再每个页面写definePageMeta。

方案2：扩展路由配置（Nuxt 3+） #

在项目根目录新建app/router.options.ts，手动修改路由的meta信息：

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig>{
  routes: (_routes) => {
    return _routes.map(route => {
      // 匹配admin开头的路由
      if (route.path.startsWith('/admin')) {
        route.meta = { ...route.meta, layout: 'admin' }
      }
      return route
    })
  }
}

这种方式更灵活，要是有个别admin子路由不想用admin布局，还能加判断排除。

方案3：全局路由中间件（Nuxt 2/3通用） #

创建全局中间件middleware/admin-layout.global.ts，在里面判断路由并切换布局：

export default defineNuxtRouteMiddleware((to) => {
  if (to.path.startsWith('/admin')) {
    setPageLayout('admin')
  }
})

全局中间件会自动作用于所有路由，访问admin路由时就会自动切换到admin布局。

补充：如果某个admin页面需要单独用其他布局，直接在页面里写definePageMeta({layout: 'xxx'})就行，页面的局部配置优先级比全局设置高。

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