Приложение Nuxt зависает при использовании вложенных маршрутов

Question

Если в индексе (домашней странице) нажать кнопку и перейти к:

http://localhost:3000/browse/songs/new

, браузер замораживается, и нет ответа с пустой белой страницей!

Однако, если я ввожу этот URL вручную, он будет работать.

структура каталогов моих страниц:

--browse
    --songs
        --new
            index.vue

browse.vue
index.vue

Я обнаружил проблему на github, но она мне не помогла!

Приложение зависает при использовании nuxt-ссылки и вложенных маршрутов с перенаправлением

Answer 1

Похоже, что ваша проблема на самом деле связана с проблемой на github, на которую вы ссылались.

Если я вас правильно понимаю, каталог ваших страниц выглядит так:

|-browse (folder)
|  |-songs (folder)
|    |-new (folder)
|      index.vue (file)
|-browse.vue (file)
|-index.vue (file)

Это будетчто приводит к путанице для nuxt, потому что у вас есть две разные вещи, которые пытаются быть одинаковыми: ваша папка 'browse' и файл 'browse'.

Вы должны попробовать это так:

|-browse (folder)
|  |index.vue (file) //this replaces your browse.vue file and can be found at http://localhost:3000/browse
|  |-songs (folder)
|    |-new (folder)
|      index.vue (file) //this can be found at http://localhost:3000/browse/songs/new
|-index.vue (file)

Если вышеприведенное нарушает договоренность дочернего элемента nuxt, кажется, что работает следующее:

|-browse (folder)
|  |index.vue (file) 
|  |-songs (folder)
|    |-index.vue 
|    |-new (folder)
|      index.vue (file) 
|-browse.vue
|-index.vue (file)

Из-за вложенности маршрутов, найдите <nuxt-child/> каждого, который вам нуженвключить его в index.vue на каждом уровне.Файл может содержать просто это:

//browse-index.vue && browse-songs-index.vue
<template>
  <div>
    <nuxt-child/>
  </div>
</template>

, но он поддерживает цепочку дочерних элементов.