如何在vueJS中为我的订单页面同时设置应用骨架加载器和空页的条件？

<template>
  <div class="skeleton-loader">
    <!-- Placeholder elements -->
  </div>
</template>

<script>
export default {
  name: 'SkeletonLoader',
  // 组件的其他配置项
}
</script>

<style scoped>
.skeleton-loader {
  /* 骨架加载器的样式 */
}
</style>

<template>
  <div class="empty-page">
    <!-- 提示信息 -->
  </div>
</template>

<script>
export default {
  name: 'EmptyPage',
  // 组件的其他配置项
}
</script>

<style scoped>
.empty-page {
  /* 空页的样式 */
}
</style>

<template>
  <div class="order-page">
    <div v-if="isLoading">
      <SkeletonLoader />
    </div>
    <div v-else-if="orders.length === 0">
      <EmptyPage />
    </div>
    <div v-else>
      <!-- 订单列表 -->
    </div>
  </div>
</template>

<script>
import SkeletonLoader from './SkeletonLoader.vue';
import EmptyPage from './EmptyPage.vue';

export default {
  name: 'OrderPage',
  components: {
    SkeletonLoader,
    EmptyPage,
  },
  data() {
    return {
      isLoading: true, // 控制是否显示骨架加载器
      orders: [], // 订单数据
    };
  },
  mounted() {
    // 模拟异步请求订单数据
    setTimeout(() => {
      this.isLoading = false;
      this.orders = [...]; // 设置订单数据
    }, 2000);
  },
}
</script>

<style scoped>
.order-page {
  /* 订单页面的样式 */
}
</style>