Question

我使用Vue Router和基于文件的组件。我调用了其中一个路由CaseDetail.vue，它得到一个参数（slug），它从带有axios的API中获取json。

我使用“In-Component Guards”执行此操作，方法名为beforeRouteEnter。我将axios的响应传递给下一个方法。

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

哪个有效，但是，Vue在数据设置之前呈现视图。这会产生undefined个错误。我如何告诉Vue等待它获取数据？

我的模板：

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

我的组件：

export default{

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

...

Answer 1

处理步骤：

axios api正在致电
组件已创建

beforeRouteEnter

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>

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

1 个答案: