Vue / Router：如何在呈现页面内容之前正确获取数据？

Question

我正在将Nuxt与Vue Router和Axios结合使用。我看到Vue Router具有称为Navigation Guards的出色功能。

[不幸的是，在下面的示例中，我的beforeRouteEnter()函数被调用，但是似乎在next()中调用我的手动fetchPageData(next)方法之前退出并切换页面。

这里的正确模式是什么？

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

[我假设我对next(vm => {})的首次调用正在异步运行，从而允许执行继续，从而导致页面更改，然后我（很可能是错误地）尝试回调next（）。

Answer 1

您可以尝试：

 async beforeRouteEnter (to, from, next) {
         await this.fetchPageData();
         next();
    },