VueRouter进阶三(数据获取)

2017-09-13 10:30:55来源:segmentfault作者:Smallmotor人点击

分享
数据获取
工具

我们可以使用 ajax 等工具.


我们这里使用了vue-resource


地址:
https://github.com/pagekit/vu...


导航完成后获取数据

当你使用这种方式时,我们会马上导航和渲染组件,然后在组件的 mounted 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态,还可以在不同视图间展示不同的 loading 状态。


component:{
data:function(){
return {
shuju:[]
}
},
template:`
<ul>
<li v-for="(shujuy , i) in shuju" :key="i">{{shujuy.name}}</li>
</ul>
`,
mounted:function(){
this.$http.get(url).then(response => {
this.shuju = response.body;
}, response => {});
}
}
在导航完成前获取数据

通过这种方式,我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 钩子中获取数据,当数据获取成功后只调用 next 方法。


beforeRouteEnter (to, from, next) {
Vue.http.get(url).then(response => {
vm.no = false
vm.shuju = response.body;
next();
}, response => {
next("/")
}},

详细资料:https://github.com/Smallmotor...

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台