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

Posted

技术标签:

【中文标题】在使用 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 组件文件。这是一个像readymethods 这样的块。 效果很好,但过渡效果消失了。我正在使用 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 

【讨论】:

以上是关于在使用 vue.js 和 vue-router 显示路由之前,Rest API 加载数据的速度不够快的主要内容,如果未能解决你的问题,请参考以下文章

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

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

Vue--路由「Vue-router」的使用

Vue + Vue-Router结合开发

Vue.js——vue-router 快速入门

Vue.js——vue-router 60分钟快速入门