loading…
{{error}}
{{post.title}}
{{post.body}}
`,
created(){
// 组件创建完成后获取数据
// 此时data已经被监听了
this.fetchData();
},
watch:{
‘$route’:‘fetchData’
},
methods:{
fetchData(){
this.error = null;
this.post = null;
this.loading = true;
this.$axios.get(‘http://127.0.0.1:8888/post’)
.then(res=>{
this.loading = false;
console.log(res.data);
this.post = res.data;
})
.catch(err=>{
this.err = err.toString();
})
}
}
}
var router = new VueRouter({
routes:[
{
path:‘/index’,
name:‘index’,
component:Index
},
{
path:‘/post’,
name:‘post’,
component:Post
}
]
});
var App = {
template:`
首页
我的博客
`
};
Vue.prototype.$axios = axios;
new Vue({
el:“#app”,
data:{
},
components:{
App
},
template:<App />
,
router
});
vue-router的导航守卫之导航完成之前获取数据
需求:在导航完成之前获取数据,之后再渲染DOM