导航栏没有发送到正确的地方

Question

So, I have a landing page that has some other pages attached, for example landing/gothere takes me to the landing seccion that belongs to /gothere and I have /another which is an attached page The problem is when I'm trying to go from /another to landing/gothere because I'm fetching the landing info using data from an api and when the I click on the navbar I go to the right place but the info is not there yet, then the api loads the page and I have this gap between the place I want to be and the place it takes me. Before I connected everything to the cms the page was working correctly. This is the nuxt link that I am using in the navbar

<nuxt-link
              :to="{
                name: 'index',
                hash: '#expertises',
                params: { offset: 100 },
              }"
              class="nav-link"
              >Nos expertises
            </nuxt-link>

PD: I already tried to use this.$route this way:

if (this.$route.params.hash) location.href = this.$route.params.hash;

changing the nuxt link to:

<nuxt-link
              :to="{
                name: 'index',
                params: { hash: '#offres' },
              }"
              class="nav-link"
              >Nos offres
            </nuxt-link>

But with this method the navbar only works if I am in one attached page, if I'm in the landing it does not work. Thank you in advance

Answer 1

In Nuxt you can wait for a promise to get resolved and after then, return the server-side rendered app to the client. In order to do this you can try the following asyncData hook which is just like mounted hook.

IMPORTANT : This can be used ONLY in page components - the ones in your pages/ folder

export default {
  props: ['someProp'],
  ...
  async asyncData() {
     await new Promise(resolve => {
       setTimeout(() => {
         resolve();
       }, 5000)
     });
  }
}

In this case I've used a simple Promise which gets resolved after 5 seconds. If you now go on the page that uses this, you will see on the browser tab a spinner loading for 5 seconds until the Promise is resolved.

You can do this when fetching as well, just remember to await it.

Highly suggest to check the Nuxt docs on this - Nuxt Data Fetching