Question

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

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

它会冻结浏览器，并且空白页没有响应！

但是，如果我手动输入此网址，它将起作用。

我的页面目录结构：

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

如果以上破坏了孩子的子协议，那么以下方法似乎可行。

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

但是它使子链保持活跃。

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

1 个答案: