vue2路由过渡loadding

可以通过在路由切换时添加过渡效果来实现路由过渡加载动画。具体步骤如下：

1. 在 App.vue 中添加过渡组件：

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

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

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
</style>

2. 在路由配置中添加 beforeEnter 钩子函数：

const router = new VueRouter({
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home,
      beforeEnter: (to, from, next) => {
        // 显示 loading 动画
        document.querySelector(".loading").style.display = "block";
        next();
      }
    },
    {
      path: "/about",
      name: "About",
      component: About,
      beforeEnter: (to, from, next) => {
        // 显示 loading 动画
        document.querySelector(".loading").style.display = "block";
        next();
      }
    }
  ]
});

3. 在路由守卫中隐藏 loading 动画：

router.afterEach((to, from) => {
  // 隐藏 loading 动画
  document.querySelector(".loading").style.display = "none";
});

这样在路由切换时会触发过渡动画，并且在路由切换前显示 loading 动画，在路由切换后隐藏 loading 动画。