实现思路

    1. <template>
    2.   <div>
    3.     通过变量loading来控制骨架屏和实际页面的渲染
    4.     <avue-skeleton v-if="loading"></avue-skeleton>
    5.     <div v-else>实际的页面</div>
    6.   </div>
    7. </template>
    9. <script>
    10. export default {
    11.   data(){
    12.     return {
    13.       loading:true,
    14.     }
    15.   },
    16.   //Vue的生命周期，这个页面组件挂载到其他地方时，先显示骨架屏
    17.   //然后通过异步修改loading的值（例子是用setTimeout延迟一段时间），来显示实际页面
    18.   mounted:function(){
    19.     setTimeout(() => {
    20.       this.loading= false
    21.     },2000)
    22.   }
    23. }
    24. </script>