使用vue router BeforeRouteEnter方法等待http请求完成

jchrr9hc  于 2023-03-31  发布在  Vue.js
关注(0)|答案(1)|浏览(204)

嗨,我正试图使它,以便当用户打开一个页面,它不会打开,直到数据从服务器成功检索,使它不会出现后0.5秒左右,用户进入后。
要做到这一点,我读到我需要使用BeforeRouteEnter,但我很难找到有关如何正确使用它的信息,特别是等待我的REST API完成其请求。
下面是我希望在路由到新组件之前等待完成的方法:

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

因此,一旦this.thread =response.data,只有这样我才希望页面显示。
需要注意的一件重要事情是,我还通过URL参数来获取数据,即主题/black/post ID。
下面是我的getUrlParam方法

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();
        }

谢谢

qxgroojn

qxgroojn1#

您需要在beforeRouteEnter内部移动getThread

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

注意:

  • 我认为beforeRouteEnter不能是异步的,所以我使用then来获取响应
  • 组件还没有准备好,所以你还不能访问它,你需要把信息保存在其他地方,这样它就可以被组件读取。我建议使用Vuex

如果你决定使用Vuex,那么你需要添加一个mutation并从promise的回调中调用它。

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

相关问题