Nuxt.js 在动态路由_id.vue里使用asyncData,为什么会执行2次?

38 阅读1分钟

记录一下小坑

在开发过程当中,普通的页面使用asyncData是正常的,但是在进入到了动态路由的时候就发现asyncData函数会被执行两次且第一次当中获取的params和query是正确的,第二次的时候就会返回undefined了。

通过查看这个线程,最初的问题可能是由结构“打开”嵌套路由(docs)这一事实引起的。其思想是,父路由应该包含 < NuxtChild > ,然后呈现子路由-等等。因为这个嵌套路由中的每个页面都打算同时显示在屏幕上,所以调用多个异步数据是有意义的。

可能的解决办法:

检查你的。查看生成的路由。您应该能够看到 Nuxt 是否生成了子路由/嵌套路由。

如果发现启用了子/嵌套路由,那么尝试通过重命名文件来禁用它们(这样它们的名称就不会与其他页面的目录相同)。

(或者)你可以使用 github.com/nuxt-commun… github.com/nuxt-commun… 对你的路由器进行完全的控制。

Asyncdata and fetch called twice in nested route · Issue #4008 · nuxt/nuxt · GitHub

你也可以通过把动态路由的页面,重修修改为一个正常的页面,参数通过query的方式进行获取,这也是可以解决的