页面切换动画更平顺

src/App.vue

@@ -5,37 +5,13 @@
     oncopy="return false"
     oncut="return false"
   >
-    <transition :name="transitionName">
-      <router-view></router-view>
-    </transition>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
 export default {
   name: "APP",
-  data() {
-    return { transitionName: "" };
-  },
-  watch: {
-    $route(to, from) {
-      const toDepth = to.path.split("/").length;
-      const fromDepth = from.path.split("/").length;
-      if (toDepth < fromDepth) {
-        this.transitionName = "slide-right";
-      } else if (toDepth > fromDepth) {
-        this.transitionName = "slide-left";
-      } else if (to.params.order && from.params.order) {
-        if (to.params.order < from.params.order) {
-          this.transitionName = "slide-right";
-        } else if (to.params.order > from.params.order) {
-          this.transitionName = "slide-left";
-        }
-      } else {
-        this.transitionName = "";
-      }
-    },
-  },
 };
 </script>
 

src/components/MainLayout/MainLayout.vue

@@ -56,7 +56,11 @@
         >退出登录</a
       >
     </header>
-    <main class="content"><slot></slot></main>
+    <transition name="fade" appear>
+      <main class="content" :key="$route.path">
+        <slot></slot>
+      </main>
+    </transition>
     <nav class="nav">
       <img src="./qm-logo.png" class="qm-logo" />
       <ul>