javascript - 使用 nuxt-child 仅一层的 Nuxt 动态嵌套路由

Question

鉴于我当前的结构:

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 内我希望它成为一个完全独立的页面。

Answer 1

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

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

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