vue 获取数据
1。导航完成后获取数据
<template> <div> <div v-if="loading"> Loading ... </div> type </div> </template> <script> export default { name: 'Type', props: { msg: String }, created(){ this.fetchData(); }, watch: { '$route': 'fetchData' }, data(){ return { loading: false } }, methods: { fetchData(){ var self = this; this.loading = true; console.log("已经进入组件了"); setTimeout(function(){ self.loading = false; },300); } } }
这个里面watch的监听,对导航,? & query带的参数都会重新去调用这个fetchDate。所以,如果局部数据并不想被路由影响,就不要加这个。出去这句,其他的和一般获取数据,加loading没有什么区别。
export default { data () { return { post: null, error: null } }, beforeRouteEnter (to, from, next) { getPost(to.params.id, (err, post) => { next(vm => vm.setData(err, post)) }) }, // 路由改变前,组件就已经渲染完了 // 逻辑稍稍不同 beforeRouteUpdate (to, from, next) { this.post = null getPost(to.params.id, (err, post) => { this.setData(err, post) next() }) }, methods: { setData (err, post) { if (err) { this.error = err.toString() } else { this.post = post } } } }
获取到数据之前,用户会停留在上一页。我打印了一下,感觉beforeRouteUpdate执行的时间并不比里面的调用提前多少,提前是提前的。