Потомок Nuxt: родительский маршрут работает неправильно

#nuxt.js #vue-router #router #nested-routes

#nuxt.js #vue-маршрутизатор #маршрутизатор #вложенные маршруты

Вопрос:

Это мое дерево файлов:

 pages/
-index.vue   (1)
-index/
--_id.vue    (2)
  

Я ожидаю:

  • если маршрут mydomain.com -> только для рендеринга index.vue (1)
  • если маршрут mydomain.com/foo -> визуализация _id.vue (2) внутри index.vue (1)

Когда у меня нет параметра для дочернего компонента, я хочу, чтобы дочерний элемент Nuxt вообще не отображался, но Nuxt отображал его со id значением undefined . Маршрутизатор Vue делает это правильно.

Это поведение, подобное поведению Nuxt в JSFiddle:https://jsfiddle.net/maxmets/95ctse8d / (строка 16 path: '/:id?' )

Это JSFiddle, который я хочу (маршрутизатор Vue):https://jsfiddle.net/maxmets/rvmxg2f7 / (строка 16 path: '/:id' )

Разница только в ? символе. Когда Nuxt автоматически создает объект routes, он добавляет ? Как заставить маршрутизатор Nuxt работать так же корректно, как маршрутизатор Vue?

Ответ №1:

Вы могли бы попробовать этот метод вложенного маршрута:

 pages/
-index.vue   (1)
-index/
--_id.vue    (2)
--_index.vue    (3)
  

В index/index.vue вы можете просто отобразить пустой шаблон

 <template>
  <div></div>
</template>
  

Возможно, это не самый чистый способ сделать, но он должен выполнить работу.

или

Но если вы решите определить свой собственный маршрутизатор, вы можете проверить дополнительный модуль Nuxt Router