网页请求完成之前显示loading，vue怎么写

在 Vue 中，可以利用 axios 拦截器来实现在请求完成之前显示 Loading 动画。以下是一个简单的示例：

<template>
  <div>
    <div v-if="loading" class="loading">
      <!-- 这里可以插入你想要的加载动画 -->
      Loading...
    </div>
    <div v-else>
      <!-- 这里是页面主体内容 -->
      <!-- 可以在这里放置你想要展示给用户的内容 -->
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      loading: false, // 初始化时设置为 false
    };
  },
  mounted() {
    axios.interceptors.request.use(config => {
      this.loading = true; // 请求开始时显示 Loading 动画
      return config;
    }, error => {
      this.loading = false; // 请求出错时隐藏 Loading 动画
      return Promise.reject(error);
    });

    axios.interceptors.response.use(response => {
      this.loading = false; // 请求完成时隐藏 Loading 动画
      return response;
    }, error => {
      this.loading = false; // 请求出错时隐藏 Loading 动画
      return Promise.reject(error);
    });
  },
};
</script>

<style>
.loading {
  /* 这里可以添加一些样式，比如居中显示 */
  text-align: center;
  font-size: 24px;
  margin-top: 100px;
}
</style>

在上面的代码中，我们引入了 axios，并通过 axios.interceptors.request 和 axios.interceptors.response 来创建请求拦截器和响应拦截器。在请求开始时和请求出错时，会将 loading 变量设置为 true，显示 Loading 动画。在请求完成时，会将 loading 变量设置为 false，隐藏 Loading 动画。这样就可以在请求完成之前显示 Loading 动画了。