使用嵌套路由时 Nuxt 应用程序冻结

Question

在索引（主页）中，如果我单击一个按钮并导航到：

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

它冻结了浏览器并且没有响应并显示空白页面！

但是，如果我手动输入这个 url，它就可以工作。

我的页面目录结构：

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

browse.vue
index.vue

我在 github 上发现了一个问题，但对我没有帮助！

App freezes while using nuxt-link and nested routes with redirect

Answer 1

看起来您的问题实际上与您链接到的 github 上的问题有关。

如果我理解正确，您的页面目录是这样的：

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

这会对 nuxt 造成混淆，因为您基本上有两个不同的东西试图成为同一个东西，您的“浏览”文件夹和您的“浏览”文件。

你应该这样尝试：

|-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-child 安排，则以下似乎可行。

|-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>

但它使子链保持活动状态。