Nuxt 中的动态嵌套路由答案

【问题标题】：Dynamic nested routes in NuxtNuxt 中的动态嵌套路由
【发布时间】：2020-08-11 09:58:01
【问题描述】：

我必须掌握 Nuxt 中的静态路由和动态路由。

但是，我正在尝试确定是否可以有效地拥有无限的嵌套页面。

例如，在 Wordpress 等标准 CMS 中，我可以定义深层页面嵌套，例如：

*hostname.com/page/other-page/another/yet-another/one-more/final-page*

我想我可以定义一个不必要的深度页面结构，例如：

- /_level1
   - index.vue
   /_level2
      - index.vue
      / _level3
         - index.vue
         /level4
            -index.vue

...等等。但这感觉不是特别高效或可扩展，并且引入了大量重复代码和维护问题。

有没有更好的方法来实现这一点？

【问题讨论】：

标签： vue.js nuxt.js vue-router

【解决方案1】：

您可以使用带有“children”选项的嵌套路由。

https://router.vuejs.org/guide/essentials/nested-routes.html

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

您还可以从单独的文件中导入子路由。

import UserRoutes from "./users/router.js"


const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: UserRoutes
    }
  ]
})

然后在你的 users/router.js 中：

export default [
  {
    // UserProfile will be rendered inside User's <router-view>
    // when /user/:id/profile is matched
    path: 'profile',
    component: UserProfile
  },
  {
    // UserPosts will be rendered inside User's <router-view>
    // when /user/:id/posts is matched
    path: 'posts',
    component: UserPosts
  }
]

【讨论】：