VUE 页面显示加载中弹窗

在Vue中，为了在页面加载时显示一个加载中（loading）弹窗，你可以采用以下几种方式：

1. **使用模板和状态管理**:
使用Vuetify、Element UI或其他UI库时，它们通常有内置的加载指示器，比如`v-loading`。在组件的模板中展示这个指示器，配合Vuex管理全局状态。

<template>
  <v-row justify="center" align="center" v-if="loading">
    <v-progress-circular active></v-progress-circular>
  </v-row>
  <router-view :key="$route.fullPath" />
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState('loading', ['loading']),
  },
  mounted() {
    this.$store.dispatch('fetchData'); // 引发数据加载操作
  }
};
</script>

这里假设你已经有一个名为`loading`的状态在Vuex中，并且有一个`fetchData` mutations来开始加载过程。

2. **自定义加载组件**:
如果没有现成的库支持，你可以创建一个简单的自定义加载组件，通过`v-if`或`v-show`来显示。

<template>
  <div v-if="isLoading">
    <loading-indicator />
  </div>
  <router-view :key="$route.fullPath" />
</template>

<template #loading-indicator>
  <!-- 这里可以是一个旋转的加载图标或者其他自定义样式 -->
  <div class="loading-container">
    <div class="loader"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
    };
  },
  created() {
    setTimeout(() => {
      this.isLoading = false; // 假定数据加载完成后的回调
    }, 2000); // 模拟异步加载时间
  },
};
</script>

这里使用了模拟异步加载的时间来关闭加载状态。