How to prevent calling parent fetch() hook, when going to child page through the nuxt-link? Is it a bug?

Question

I have problem with parent fetch() hook, which is called during going to child page through the nuxt-link. How to resolve this problem? Maybe is it nuxt.js bug? To achieve parent -> child structure, I set up my project according to the pattern given in the nuxt.js documentation:
-parent.vue
-parent
--child1.vue
--child2.vue

For example going to Child1 through the nuxt-link: <nuxt-link to="/parent/child1">Child1</nuxt-link> causes calling fetch() hook in parent.

I think a lot of people have this problem. Thank you in advance for your help in resolving this problem.

Answer 1

Take a look at Vue custom options merge strategies https://vuejs.org/v2/guide/mixins.html#Custom-Option-Merge-Strategies

~/plugins/custom-merge-fetch.js

import Vue from 'vue'

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

And in nuxt.config.js

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

Answer 2

I have already find the solution, which is very simple. In my case I forgot add default page for nuxt-child(creating index.vue file in parent folder) like below:
-parent.vue
-parent
--index.vue
--child1.vue
--child2.vue

After doing this, the problem is resolved and parent fetch() hook is not calling anymore. Previously, the DOM structure was not generated by default for child pages(index.vue file was not created), which resulted in the parent refreshing, when going to the child page through the nuxt-link.