javascript - Vue/路由器 : How do I correctly fetch data before rendering page content?

Question

我将 Nuxt 与 Vue 路由器和 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

你是对的，调用next()第二次不正确。您第一次调用 next()告诉路由器“继续，您可以继续更改事件组件(创建/安装/渲染)，当创建组件时，调用我的回调(作为参数传递给 next())

您可以按照 Data fetching - fetching before navigation 中的指导进行操作文档即。首先获取数据并调用next()之后，但这需要从组件本身中提取获取逻辑。

一般来说，我发现以假设数据在第一次渲染时不在这里并且稍后在所有异步调用解决时出现的方式编写所有组件更容易......

更新 Nuxt 异步数据获取选项

当您使用 Nuxt.js 时，您还有其他一些如何使用异步数据的选项:

nuxtServerInit - 用于使用来自服务器端的数据填充客户端 Vuex 存储

fetch method - fetch 方法用于在渲染页面之前填充存储。就像 asyncData方法，除了它不设置组件数据并允许您将数据放入存储中。从 fetch 返回 promise 方法将使 Nuxt 在呈现组件之前等待 promise 解决...

asyncData方法可用于获取数据并将其放入组件的data .从 asyncData 返回 promise 方法将使 Nuxt 在呈现组件之前等待 promise 解决...

export default {
  async fetch({store, $axios}) {
    const result = await $axios.$get('/api/v2/inventory/3906');
    store.commit('property/setProperty', result[0]);
  }
}