如何在Nuxt 3中为根路径/使用嵌套路由实现基于路由的布局？

可以实现和你Vue Router配置完全一致的嵌套路由结构，不需要逐个页面通过definePageMeta指定布局。核心是利用Nuxt 3的文件系统路由特性，通过调整目录结构来实现根路径的布局容器。

解决方案：使用Catch-All路由作为根布局容器 #

Nuxt 3的文件系统路由中，[...].vue是一个通配符路由，会匹配所有未被更具体路由匹配的路径。我们可以用它作为根路径（/、/about、/privacy）的布局容器，对应你原来的WebsiteLayout。

步骤1：调整pages目录结构 #

最终目录结构如下：

pages/
├── [...].vue       # 根布局容器（对应WebsiteLayout）
├── index.vue       # /路径的内容页面
├── about/
│   └── index.vue   # /about路径的内容页面
├── privacy/
│   └── index.vue   # /privacy路径的内容页面
└── admin/
    └── dashboard.vue # /admin/dashboard路径的内容页面
└── admin.vue       # Admin布局容器（对应AdminLayout）

步骤2：编写根布局容器（pages/[...].vue） #

这个文件对应你Vue Router中的WebsiteLayout，负责渲染根路径下所有子路由的公共布局：

<script setup lang="ts">
</script>

<template>
  <div>
    <h3>Website Layout</h3>
    <!-- 这里渲染子路由的内容页面 -->
    <NuxtPage />
  </div>
</template>

步骤3：编写根路径的内容页面（pages/index.vue） #

原来的首页内容移到这里，作为/路径的子页面：

<script setup lang="ts">
</script>

<template>
  <div>Page: Home</div>
</template>

步骤4：保留子路由页面 #

pages/about/index.vue和pages/privacy/index.vue保持你原来的代码即可，不需要修改。

步骤5：Admin板块的嵌套路由（不变） #

pages/admin.vue作为Admin布局容器，对应你原来的AdminLayout：

<script setup lang="ts">
</script>

<template>
  <div>
    <h3>Admin Layout</h3>
    <NuxtPage />
  </div>
</template>

pages/admin/dashboard.vue保持原代码：

<script setup lang="ts">
</script>

<template>
  <div>Admin Dashboard</div>
</template>

效果验证 #

• 访问/：渲染[...].vue的布局 + pages/index.vue的内容
• 访问/about：渲染[...].vue的布局 + pages/about/index.vue的内容
• 访问/privacy：渲染[...].vue的布局 + pages/privacy/index.vue的内容
• 访问/admin/dashboard：渲染admin.vue的布局 + admin/dashboard.vue的内容

为什么之前的尝试失败？ #

你之前创建的pages/index.vue只是/路径的单独页面，不是根路由的父容器。Nuxt的文件系统路由规则是：只有当父路由有对应的文件（比如admin.vue对应/admin父路由），其子路由放在同名目录下时才会触发嵌套渲染。而/about这类根级子路由默认不会继承index.vue的布局，因为index.vue不是父容器。

补充说明 #

• 通配符路由[...].vue会优先匹配未被其他路由覆盖的路径，因此/admin/*的路由会被admin.vue和admin/目录下的页面优先匹配，不会冲突。
• 如果需要更精细的路由控制（比如排除某些路径使用根布局），可以在[...].vue中通过useRoute()判断路径，或者使用路由中间件动态切换布局。

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