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

Question

我将Nuxt与Vue路由器和Axios一起使用。我看到Vue路由器有一个叫做导航卫士的神奇功能。

不幸的是，在下面的示例中，调用了mybeforeRouteEnter（）函数，但似乎在fetchPageData（next）中调用手动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）的第一次调用=




Answer 1

这里发生的情况是，您已经在调用next，这就是路线立即进入的原因。

你接下来打电话去哪里？

beforeRouteEnter (to, from, next) {
    next(vm => {  // <= HERE you execute next
        vm.fetchPageData(next);
    });
},

上面的代码将执行vm。已渲染组件时获取页面数据。

因此，即使您没有在fetchPageData上调用next，路由也会进入。

假设您想在BE获取某些数据后进入视图，您可以在路由器配置上使用beForeEnter：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        axios.get('api/...')
          .then(response => {
             store.commit('mutation', response)
             next()
          })
          .catch(e => {
            alert('Something went wrong')
            next(false)
          })
      }
    }
  ]
})

另一种解决方案是允许路由进入，但在获取数据时显示加载程序：签出此答案

Answer 2

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

首先获取数据，然后调用Next（），但这需要从组件本身提取提取逻辑。

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

UPDATE Nuxt异步数据获取选项

当您使用Nuxt时。js您还可以选择如何使用异步数据：

1. nuxtServerInit-用来自服务器端的数据填充客户端Vuex存储非常有用
2. 获取方法-获取方法用于在呈现页面之前填充存储。它类似于asyncData方法，只是它不设置组件数据，并允许您将数据放入存储区。返回Promise从getch方法将使Nuxt等待promise解决之前，它呈现组件...
3. 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]);
  }
}