在渲染之前将ajax获取的数据设置为组件

Question

我正在使用Vue路由器和基于文件的组件。我打电话给其中一条路线casetail。vue并获取一个参数（slug），该参数使用axios从API获取json。

我使用“组件内保护”来实现这一点，使用名为beforeRouteEnter的方法。我正在将axios的响应传递到下一个方法。

    axios.get('/case/'+ to.params.slug +'.json').then((response) => {
      next(vm => {
        vm.entry = response.data;
      })
    });

这是可行的，但是，Vue在设置数据之前呈现视图。这将生成未定义的错误。我如何告诉Vue等待它获取数据？

我的模板：

<template>
  <main>
    <h1>{{ entry.title }}</h1>
  </main>
</template>

我的组成部分：

export default{

 name: 'CaseDetail',
 data(){
    return{         
        entry: null
    };
 },

...




Answer 1

处理步骤：

1. axios api正在调用
2. 组件已创建
3. 调用路由之前的中的next（）。此时，由于组件已创建，所以vm变量可用

如果您登录您的组件

  created() {
    console.log('Component is created!')
  },
  beforeRouteEnter(to, from, next) {
    setTimeout(() => {
      next(vm => {
        console.log('next() is called')
      })
    }, 3000)
  },

那么结果会是

组件已创建！

调用next（）

您应该为数据设置默认值，或者添加安全检查。

<template>
  <main>
    <h1>{{ entry? entry.title: '' }}</h1>
  </main>
</template>