修改

src/App.vue

@@ -2,7 +2,9 @@
   <div id="app">
     <div class="view-container">
       <AppHeader :visible="visible"></AppHeader>
+      <transition :name="transitionName">
         <router-view />
+      </transition>
       <AppBackTop></AppBackTop>
     </div>
   </div>
@@ -18,6 +20,7 @@ export default {
   },
   data() {
     return {
+      transitionName: "",
       isGray: false,
       visible:true,
     };
@@ -50,7 +53,21 @@ export default {
   destroyed () {
     // 离开该页面需要移除这个监听的事件，不然会报错
     window.removeEventListener('scroll', this.handleScroll)
-  }
+  },
+  watch: {
+    //使用watch 监听$router的变化
+    $route(to, from) {
+      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
+      console.log(to, "to");
+      console.log(from, "from");
+      if (to.meta.index > from.meta.index) {
+        //设置动画名称
+        this.transitionName = "slide-left";
+      } else {
+        this.transitionName = "slide-right";
+      }
+    },
+  },
 }
 </script>
 <style>
@@ -60,4 +77,34 @@ export default {
   width: 100%;
   max-width: 1200px;
 }
+
+
+.slide-right-enter-active,
+.slide-right-leave-active,
+.slide-left-enter-active,
+.slide-left-leave-active {
+  will-change: transform;
+  transition: all 250ms;
+  position: fixed;
+}
+​
+.slide-right-enter {
+  opacity: 0;
+  transform: translate3d(-100%, 0, 0);
+}
+​
+.slide-right-leave-active {
+  opacity: 0;
+  transform: translate3d(100%, 0, 0);
+}
+​
+.slide-left-enter {
+  opacity: 0;
+  transform: translate3d(100%, 0, 0);
+}
+​
+.slide-left-leave-active {
+  opacity: 0;
+  transform: translate3d(-100%, 0, 0);
+}
 </style>

src/router/index.js

@@ -17,7 +17,10 @@ const routes = [
     children: [
       {
         path: '/home/index',
-        component: () => import('@/views/HomeView/Index.vue')
+        component: () => import('@/views/HomeView/Index.vue'),
+        meta: {
+          index: 1
+        }
       },
       {
         path: '/home/index/msgDetail',
@@ -71,7 +74,10 @@ const routes = [
   },
   {
     path: '/noticeCenter',
-    component: () => import('../views/NoticeCenter.vue')
+    component: () => import('../views/NoticeCenter.vue'),
+    meta: {
+      index: 2
+    }
   },
   {
     path: '/pointsRank',