Using vue router BeforeRouteEnter method to wait for http request to complete

Question

Hi I'm trying to make it so that when a user opens a page it won't open until the data from the server is successfully retrieved so that it won't appear after 0.5s or so after the user enters.

To do this I read that I need to use BeforeRouteEnter but I'm having trouble finding information on how to properly use this, especially with waiting for my REST API to complete its request.

Here's the method I want to wait to complete before routing to my new component:

 async getThread() {
            const response = await postsService.fetchOneThread({
                id: this.blockId,
                topic: this.topicId,
                thread: this.postId
            });
            this.thread = response.data;
        }

so once this.thread = response.data only then do I want the page to display.

An important thing to note is that I am also passing through URL parameters to get the data which is the topic/black/post ID.

Here is my getUrlParam method also

url() {
            let x = this.$route.params.topic.split('-');
            this.topicId = x[0];

            let y = this.$route.params.id.split('-');
            this.blockId = y[0];

            let post = this.$route.params.thread.split('-');
            this.postId = post[1];

            this.getThread();
        }

Thanks

Answer 1

You need to move getThread inside beforeRouteEnter

beforeRouteEnter: (to, from, next) => {
  postsService.fetchOneThread({
    id: this.blockId,
    topic: this.topicId,
    thread: this.postId
  }).then( response => {
     //store the data somewhere accessible
     next()
  })
},

A few notes:

• I don't think beforeRouteEnter can be async, so I'm using then to get the response
• the component is not yet ready, so you can't access it yet, you need to save the information some other place so it can be read by the component. I'd suggest using Vuex for this.

If you decide to use Vuex than you need to add a mutation and call it from the promise's callback.

store.commit('ADD_THREAD', response.data)