Nuxt динамические вложенные маршруты только с одним слоем с использованием nuxt-child

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')
    })
  }
}