代码之家 › 专栏 › 技术社区 › sparkyspider

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

nuxt.js vue-router vue.js javascript

sparkyspider · 技术社区 · 5 年前

不幸的是,在下面的示例中,我的 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()之前发生页更改。

0 回复 | 直到 5 年前

sparkyspider 5 年前

你说得对,打电话来 next() 下一步() 下一步()

您可以按照中的指导进行操作 Data fetching - fetching before navigation 文档,即先获取数据并调用 下一步()

一般来说,我发现在第一次呈现时数据不在这里,并且在所有异步调用解决之后才出现时,我发现更容易编写所有组件。。。

更新 Nuxt异步数据获取选项

nuxtServerInit
fetch method -fetch方法用于在呈现页面之前填充存储。就像是 asyncData fetch
asyncData 方法可用于获取数据并将其放入组件的 data 异步数据 方法将使Nuxt在呈现组件之前等待promise解析。。。

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

Roland 5 年前

next 那就是 为什么路线会立即进入。

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

上面的代码将执行 vm.fetchPageData 当组件已经渲染时。

所以即使你不打电话 下一个 fetchPageData

假设您想在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)
          })
      }
    }
  ]
})

Checkout this answer