vue-router 导航完成后获取数据的实现方法

created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

使用生命周期的 created() 函数,在组件创建完成后调用该方法。

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.error = err.toString();
    })
  }
}

完整代码如下:

到此这篇关于vue-router 导航完成后获取数据的文章就介绍到这了,更多相关vue-router 获取数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(vue-router 导航完成后获取数据的实现方法)