Nuxt 动态嵌套路由，只有一层使用 nuxt-child答案

【问题标题】：Nuxt dynamic nested routes with only one layer using nuxt-childNuxt 动态嵌套路由，只有一层使用 nuxt-child
【发布时间】：2019-09-20 12:47:13
【问题描述】：

鉴于我有当前的结构：

pages/
--| _user/
-----| _list/
--------| _bookmark/
-----------| index.vue
--------| index.vue
-----| _list.vue

然后我正在尝试实现一种结构，您可以在其中访问用户个人资料。

/<profile-name>

然后访问他们使用显示孩子的孩子路线制作的列表

/<profile-name>/<list-name>

这很好用；我有 _list.vue 用作父级，_list/index.vue 显示在里面。

但现在我想为

添加一条路线

/<profile-name>/<list-name>/<bookmark-name>

不应将父级用于_list.vue

但是，_bookmark/index.vue 嵌入在 _list.vue 中，我希望它是一个完全独立的页面。

【问题讨论】：

标签： javascript vue.js vuejs2 nuxt.js

【解决方案1】：

为此，我必须将页面从/pages 文件夹移动到components 文件夹中。

这样，我可以防止 Nuxt 自动生成不需要的路由，然后我可以像这样通过路由器配置手动扩展路由：

router: {
  extendRoutes(routes, resolve) {
    routes.push({
      name: 'bookmark',
      path: '/:slug/:list/:id',
      component: resolve(__dirname, 'components/pages/bookmark.vue')
    })
  }
}

【讨论】：