Question

-7

Vue / Router: How do I correctly fetch data before rendering page content?

rated 0 times [ 0] [ 7] / answers: 1 / hits: 15956 / 4 Years ago, fri, february 14, 2020, 12:00:00

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.commit('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().

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jocelynkarsynr

Add To Favorites

Follow

Total Points: 472

Total Questions: 98

Total Answers: 96

Location: Macau

Member since Mon, Nov 16, 2020

4 Years ago

jocelynkarsynr questions

1 file upload using axios in react

Tue, Feb 8, 22, 00:00, 2 Years ago

1 Unable to write data (addRow) into Excel file in Nodejs

Sat, Jul 11, 20, 00:00, 4 Years ago

1 How can I export * as namespace in Babel?

Sun, May 10, 20, 00:00, 4 Years ago

1 React Routing to Same Component with Different URL

Sat, Jan 18, 20, 00:00, 4 Years ago

1 How do I persist user authentication using the Firebase refresh token?

Tue, Aug 20, 19, 00:00, 5 Years ago

View All

answered 4 Years ago anders · Accepted 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 component (create/mount/render) and when the component 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 component itself.

Generally I find easier to write all component in the way assuming data are not here on 1st render and are coming 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 asyncData method except it doesn't set the component data and allows you to put the data into the store. Returning Promise from fetch method will make Nuxt wait for promise to resolve before it renders the component...

asyncData method can be used to to fetch data and put it inside component's data. Returning Promise from asyncData method will make Nuxt wait for promise to resolve before it renders the component...

export default {

  async fetch({store, $axios}) {

    const result = await $axios.$get('/api/v2/inventory/3906');

    store.commit('property/setProperty', result[0]);

  }

}