NuxtJS带参数嵌套路由问题：对应URL的文件夹结构如何配置？

针对你需要实现的 /websites/[websiteId]/apps/[appId]/overview 路由，同时要获取 websiteId 和 appId 的需求，下面分Nuxt3和Nuxt2两个版本给出正确的文件夹结构及参数获取方法：

Nuxt3 版本 #

文件夹结构 #

pages/
├── websites/
│   ├── [websiteId]/
│   │   ├── apps/
│   │   │   ├── [appId]/
│   │   │   │   ├── overview.vue  # 对应 /websites/xxx/apps/yyy/overview
│   │   │   │   └── index.vue     # 对应原URL /websites/xxx/apps/yyy
│   │   │   └── index.vue         # 可选，对应 /websites/xxx/apps
│   │   └── index.vue             # 可选，对应 /websites/xxx
│   └── index.vue                 # 可选，对应 /websites
└── index.vue                     # 根页面

获取参数方法 #

在 overview.vue 中通过 useRoute() 钩子提取动态参数：

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
const websiteId = route.params.websiteId
const appId = route.params.appId
</script>

Nuxt2 版本 #

文件夹结构 #

Nuxt2的动态参数文件夹需用下划线前缀命名：

pages/
├── websites/
│   ├── _websiteId/
│   │   ├── apps/
│   │   │   ├── _appId/
│   │   │   │   ├── overview.vue  # 对应 /websites/xxx/apps/yyy/overview
│   │   │   │   └── index.vue     # 对应原URL /websites/xxx/apps/yyy
│   │   │   └── index.vue         # 可选，对应 /websites/xxx/apps
│   │   └── index.vue             # 可选，对应 /websites/xxx
│   └── index.vue                 # 可选，对应 /websites
└── index.vue                     # 根页面

获取参数方法 #

在 overview.vue 中通过 asyncData 或路由实例获取参数：

<script>
export default {
  asyncData({ params }) {
    const websiteId = params.websiteId
    const appId = params.appId
    return { websiteId, appId }
  },
  mounted() {
    // 也可在钩子中直接访问路由参数
    console.log(this.$route.params.websiteId)
    console.log(this.$route.params.appId)
  }
}
</script>

常见失效原因排查 #

如果之前嵌套路由无法工作，大概率是以下问题：

• 动态参数文件夹命名错误：Nuxt3必须用 [param] 格式，Nuxt2必须用 _param 格式
• 缺少对应路径的 index.vue：比如原URL /websites/xxx/apps/yyy 需要在 [appId]/（或 _appId/）文件夹下创建 index.vue
• 自定义路由规则冲突：检查是否有手动配置的路由覆盖了自动生成的嵌套路由

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