显示加载指示器或者进度条，让用户知道正在发生什么事情。可以使用模态框、骨架屏、菊花图等形式。怎么做在vue中

在Vue中显示加载指示器或进度条，你可以使用以下几种方法：

1. **Vue CLI 中的动态组件**:
- 在模板中创建一个占位的动态组件，比如 `<router-view-loading :is-loaded="isLoading"></router-view-loading>`。
- 创建一个名为 `router-view-loading.vue` 的文件，包含加载指示器或进度条组件，初始状态设为可见（例如 `v-if="!isLoading"`）。
- 在需要显示加载的组件上，使用 `v-model` 绑定一个布尔值 `isLoading`，在数据初始化时将其设为 `true`，数据加载完成后设为 `false`。

<template>
  <div v-if="isLoading">
    <router-view-loading />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      // ...其他数据
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.$http.get('/api/data').then(() => {
        this.isLoading = false;
      }, () => {
        // 处理加载失败的情况
      });
    }
  }
};
</script>

2. **Vue Router 提供的导航守卫**:
- 使用 `beforeRouteEnter` 或 `beforeEach` 守卫，在导航开始前显示加载指示器。
- 当导航完成时，隐藏它。

import VueRouter from 'vue-router';

// ...
router.beforeEach((to, from, next) => {
  this.isLoading = true; // 显示加载指示器
  next();
});

router.afterEach((to, from) => {
  this.isLoading = false; // 隐藏加载指示器
});

3. **骨架屏组件库**:
- 可以使用第三方的骨架屏库，如vue-skeleton-loader，直接引入并应用到需要加载的视图上。

npm install vue-skeleton-loader --save

<template>
  <skeleton-loader :visible="isLoading" />
</template>

<script>
import SkeletonLoader from 'vue-skeleton-loader';

export default {
  components: { SkeletonLoader },
  data() {
    return { isLoading: true };
  },
  //...
};
</script>

无论哪种方法，关键在于保持状态同步，并在适当的时候改变这个状态来控制加载指示器的显示和隐藏。记得关注用户体验，确保加载过程中的动画流畅自然。