当通过nuxt-link进入子页面时，如何防止调用parent fetch()钩子？这是一个bug吗？

Question

我有一个问题，当我通过nuxt-link进入子页面时，会调用parent fetch()hook。如何解决这个问题？也许是nuxt.js的bug？为了实现父-> 子结构，我按照nuxt.js文档中给出的模式来设置我的项目：-parent.vue -parent --child1.vue --child2.vue。

例如通过nuxt-link进入Child1。<nuxt-link to="/parent/child1">Child1</nuxt-link> 会导致调用parent中的fetch()钩子。

我想很多人都有这个问题。先谢谢你帮忙解决这个问题。

Answer 1

看看Vue自定义期权的合并策略 https:/vuejs.orgv2guidemixins.html#Custom-Option-Merge-Strategies。

~pluginscustom-merge-fetch.js。

import Vue from 'vue'

Vue.config.optionMergeStrategies.fetch = function (childFetch, parentFetch) {
  // your logic
}

而在nuxt.config.js中

plugins: [
  '~/plugins/custom-merge-fetch',
],

Answer 2

我已经找到了解决方案，非常简单。在我的例子中，我忘了为nuxt-child添加默认页面（在父文件夹中创建index.vue文件），如下所示。 -parent.vue -parent --index.vue --child1.vue --child2.vue。

这样做后，问题解决了，父页fetch()钩子不再调用了。之前，子页面默认没有生成DOM结构（没有创建index.vue文件），导致父页面刷新，通过nuxt-link进入子页面。