vue页面切换加载动画

在Vue中实现页面切换加载动画可以使用Vue的过渡效果和动画库来实现。下面是一种常见的实现方式：

1. 首先，在你的Vue组件的模板中添加一个 `<transition>` 元素，并为其添加一个 `name` 属性，用于指定过渡效果的名称。

<transition name="fade">
  <!-- 页面内容 -->
</transition>

2. 在对应的样式文件中，定义过渡效果的 CSS 样式。这里以实现一个淡入淡出的动画为例：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

3. 在你的Vue组件中，根据需要触发页面切换时，通过添加或移除元素来触发过渡效果。你可以在切换页面前显示一个加载动画，然后在数据加载完成后再切换页面。

<template>
  <div>
    <button @click="loadData">加载数据</button>
    <transition name="fade">
      <div v-if="loading" key="loading">加载中...</div>
      <div v-else key="content">页面内容</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    loadData() {
      this.loading = true;
      // 模拟数据加载过程
      setTimeout(() => {
        this.loading = false;
      }, 2000);
    }
  }
}
</script>

这样，当点击 "加载数据" 按钮时，页面会显示加载中的动画，等数据加载完成后，动画消失，页面内容切换显示。