zoukankan      html  css  js  c++  java
  • 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执行的时间并不比里面的调用提前多少,提前是提前的。

  • 相关阅读:
    20170822xlVBA ExportCellPhone
    【C/C++】C++ warning: control reaches end of non-void function return
    【C/C++】例题3-5 生成元/算法竞赛入门经典/数组与字符串
    对象类型的参数传递
    对象的创建和使用
    方法的重载
    构造方法
    方法
    修饰符
    类的一般形式
  • 原文地址:https://www.cnblogs.com/chenyi4/p/11393198.html
Copyright © 2011-2022 走看看