1

I have a default header which is defined in /layouts as below

<v-app-bar :elevation="0" color="white" fixed app>
  <div class="w-100">
    <NuxtLink to="/">
      <v-img
        max-height="24"
        src="/nuxt_static/images/rectangle.png"
        :contain="true"
      ></v-img>
    </NuxtLink>
  </div>
</v-app-bar>
<v-main>
  <v-container style="padding: 0">
    <nuxt />
  </v-container>
</v-main>

I want that when I click on the image rectangle.png it will redirect to homepage. Homepage is defined in the first child index.vue of /pages/ directory with asyncData() function and a component contains it's template. When I enter http://example.com/ into browser, everything works fine. But when I'm in another page and click on the header image to go to homepage, it just displays the template and doesn't run through asyncData() function. Therefore, there is no data on homepage. What should I do for now?

user14717074
  • 11
  • 3
  • I used to meet similar problems because of wrong layout name. Make sure your layout must named as `default.vue` in `layouts` folder. – DengSihan Jan 06 '21 at 03:32
  • @Ntx yes, the name is correct. Do you have any other suggestion? – user14717074 Jan 06 '21 at 07:01
  • show your entire code (or the key part: layout.vue\index.vue) in here or online sandbox which like [codesandbox](https://codesandbox.io/) may help instead of describing errors. maybe it was caused by something that you don't note. – DengSihan Jan 06 '21 at 07:51

1 Answers1

0

Try to move your code in asyncData hook to fetch hook. Fetch hook will be called both in server side or client side.

dyon048
  • 174
  • 4