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
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.