I'm using Nuxt with Vue Router and Axios. I see Vue Router has this fantastic feature called Navigation Guards.
Unfortunately, in the example below, my beforeRouteEnter() function is called but seems to exit and switch pages before my manual next() method is called in fetchPageData(next).
What is the correct pattern here?
export default {
beforeRouteEnter (to, from, next) {
next(vm => {
vm.fetchPageData(next);
});
},
methods: {
async fetchPageData(next) {
const result = await this.$axios.$get('/api/v2/inventory/3906?apiKey=f54761e0-673e-4baf-86c1-0b85a6c8c118');
this.$storemit('property/setProperty', result[0]);
next();
}
}
}
I assume that my first call to next(vm => {}) is running asynchronously, allowing execution to continue, resulting in a page change before I (most likely incorrectly) try to callback next().
I'm using Nuxt with Vue Router and Axios. I see Vue Router has this fantastic feature called Navigation Guards.
Unfortunately, in the example below, my beforeRouteEnter() function is called but seems to exit and switch pages before my manual next() method is called in fetchPageData(next).
What is the correct pattern here?
export default {
beforeRouteEnter (to, from, next) {
next(vm => {
vm.fetchPageData(next);
});
},
methods: {
async fetchPageData(next) {
const result = await this.$axios.$get('/api/v2/inventory/3906?apiKey=f54761e0-673e-4baf-86c1-0b85a6c8c118');
this.$store.mit('property/setProperty', result[0]);
next();
}
}
}
I assume that my first call to next(vm => {}) is running asynchronously, allowing execution to continue, resulting in a page change before I (most likely incorrectly) try to callback next().
2 Answers
Reset to default 6What is happening there, is that you already calling
nextand that's why the route enters immediately.
Where you are calling next ?
beforeRouteEnter (to, from, next) {
next(vm => { // <= HERE you execute next
vm.fetchPageData(next);
});
},
And the above code will execute vm.fetchPageData when the ponent is already rendered.
So even if you don't call next on the fetchPageData the route will enter.
By assuming that you want to enter the view after certain data is fetched by BE you can use beforeEnter on the router config:
const router = new VueRouter({
routes: [
{
path: '/foo',
ponent: Foo,
beforeEnter: (to, from, next) => {
axios.get('api/...')
.then(response => {
store.mit('mutation', response)
next()
})
.catch(e => {
alert('Something went wrong')
next(false)
})
}
}
]
})
Another solution would be to allow the route to enter but show a loader while data is being fetched: Checkout this answer
You are right, calling next() second time is incorrect. Your first call to next() tells Router "go on, you can proceed with changing active ponent (create/mount/render) and when the ponent is created, call my callback (passed as an argument to next())
You can follow guidance in Data fetching - fetching before navigation Docs ie. fetching data first and call next() after but that requires to extract fetch logic from the ponent itself.
Generally I find easier to write all ponent in the way assuming data are not here on 1st render and are ing later when all async calls resolve...
UPDATE Nuxt async data fetching options
As you are using Nuxt.js you have some other options how to use async data:
- nuxtServerInit - useful to fill client-side Vuex store with data from server side
- fetch method - The fetch method is used to fill the store before rendering the page. It's like the
asyncDatamethod except it doesn't set the ponent data and allows you to put the data into the store. Returning Promise fromfetchmethod will make Nuxt wait for promise to resolve before it renders the ponent... - asyncData method can be used to to fetch data and put it inside ponent's
data. Returning Promise fromasyncDatamethod will make Nuxt wait for promise to resolve before it renders the ponent...
export default {
async fetch({store, $axios}) {
const result = await $axios.$get('/api/v2/inventory/3906');
store.mit('property/setProperty', result[0]);
}
}