在使用 vue.js 和 vue-router 显示路由之前，Rest API 加载数据的速度不够快

Posted 2023-02-22

【中文标题】在使用 vue.js 和 vue-router 显示路由之前，Rest API 加载数据的速度不够快

【英文标题】：Rest API doesn't load data quick enough before the route is shown using vue.js and vue-router

【发布时间】：2016-10-10 10:37:33

【问题描述】：

将 Vue.js 与 vue-router 与 WP Rest API 2 结合使用。 当我切换到一条路线时，我看到应该包含内容的 div 出现，然后内容最终加载。我也收到此错误：

[Vue 警告]：评估表达式“content.content.rendered”时出错：TypeError: Cannot read property 'rendered' of undefined

即使出现错误，内容最终也会加载到计算机上，但在移动设备上，内容根本不会显示。这是我抓取特定页面的方法。我曾尝试使用 nextTick，但无法使其正常运行。

任何帮助将不胜感激，如果您需要更多信息，请告诉我。

<template>

<div> 
<div class="animated cateringWrap">
  <h1> content.title.rendered </h1>
   content.content.rendered 
</div>
</div>

</template>



<script>
export default 
data() 
  return 
    content: []
  
,


ready: function()
  this.loadContent();
,

methods: 
  loadContent: function() 
    this.$http.get('http://localhost/t/wp-json/wp/v2/pages/82').then(function(response)
        this.content = response.data;
    );
     
 
  


 

</script>

【问题讨论】：

我建议在这里发布代码，而不是图片。

【参考方案1】：

使用 vue-router 的 data hook。

http://router.vuejs.org/en/pipeline/data.html

route: 
  data: function (transition) 
    return this.$http.get(...);
  

然后，在模板中：

<div v-if="$loadingRouteData">Loading ...</div>
<div v-else>Your current HTML.</div>

【讨论】：

我正在调用 index.js 中的路由 - 不确定我会在哪里添加您的代码。 ' router.map( '/home': component: Home , '

@4ndy route: 块进入您的.vue 组件文件。这是一个像ready 或methods 这样的块。

效果很好，但过渡效果消失了。我正在使用 animate.css 反弹效果。您基本上所做的是给定一个预加载器屏幕。感谢那。不过，我现在遇到了更多错误，但我仍然试图摆脱同样的错误：** [Vue 警告]：评估表达式“content.content.rendered”时出错：TypeError：无法读取属性“rendered” ' of undefined ** 我现在遇到的其他错误：

[Vue 警告]：您正在 vm 实例上设置一个不存在的路径“请求”。考虑使用“数据”选项预初始化属性以获得更可靠的反应性和更好的性能。 [Vue 警告]：您在 vm 实例上设置了不存在的路径“数据”。考虑使用“数据”选项预初始化属性以获得更可靠的反应性和更好的性能功能）[Vue 警告]：您正在 vm 实例上设置不存在的路径“状态”。考虑使用“数据”选项预初始化属性以获得更可靠的反应性和更好的性能函数）

你会想要在v-else 中创建任何引用content 属性的东西。您会收到其中一些错误，因为在 GET 调用完成之前内容是 []。

【参考方案2】：

一个简单的解决方法是阻止 Vue 尝试访问对象属性：。 首先将初始content 值设置为null，根据您的示例，没有理由将其设置为空数组。看起来它将从您的响应数据中分配一个对象。然后，在您看来，只需这样做：

 content ? content.content.rendered : null