NuxtJS 带参数的嵌套路由

https://dev.site.io/websites/1bbe6526-61c1-4077-8400-77a642580eac/apps/30620171-af2f-4e82-854e-2bb797c017d8

访问网站和应用程序 ID 的文件夹结构会是什么样子：

https://dev.site.io/websites/1bbe6526-61c1-4077-8400-77a642580eac/apps/30620171-af2f-4e82-854e-2bb797c017d8/overview

根本无法让嵌套路由工作

我对你的问题很感兴趣，因为我知道这个问题在我未来的项目中会发生在我身上。我不得不承认深层嵌套的路由非常难以理解。我希望我下面的解释是可以理解的。

- pages
  - index.vue // This is the home page
  - websites.vue - // NuxtPage
  - website // FOLDER
    - index.vue // Websites page content
    - [id].vue // NuxtPage - for Dynamic content based on the ID 
    - [id] // FOLDER
      - index.vue // Dynamic ID content
      - apps.vue // Nuxtpage
      - apps // FOLDER
        - index.vue // Apps page content
        - [id].vue // NuxtPage - for Dynamic content based on the ID
        - [id] // FOLDER
          - index // Dynamic ID content
          - overview.vue // NuxtPage
          - overview // FOLDER
            - index // Overview page content
  

我根据你的问题创建了 stackblitz 示例：

https://stackblitz.com/edit/nuxt-starter-ua5w8s?file=pages/websites/[id]/apps/[id]/overview/index.vue https://stackblitz.com/edit/nuxt-starter-ua5w8s?file=pages/websites/%5Bid%5D/apps/%5Bid%5D/overview/index.vue

解释基本嵌套路由的有用文章：

https://masteringnuxt.com/blog/explaining-nested-routes https://masteringnuxt.com/blog/explaining-nested-routes

https://blog.logrocket.com/troubleshooting-nested-pages-nuxt https://blog.logrocket.com/troubleshooting-nested-pages-nuxt