From e2bedc7444b79d7819ba77273b9b62d81639c6ae Mon Sep 17 00:00:00 2001
From: tinyu <tinyu@inscode.cn>
Date: Thu, 28 Mar 2024 16:51:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E9=85=8D=E7=BD=AE=E8=BF=87=E6=B8=A1?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=EF=BC=8C=E5=8A=A0=E8=BD=BD=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 babel.config.js                        |  1 +
 package.json                           |  4 +-
 src/components/layout/dynamicRoute.vue | 70 +++++++++++++++++++++-----
 src/router/index.js                    | 17 ++++++-
 yarn.lock                              |  5 ++
 5 files changed, 80 insertions(+), 17 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index e955840..a1b8d97 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+  compact: false,
   presets: [
     '@vue/cli-plugin-babel/preset'
   ]
diff --git a/package.json b/package.json
index 7f5b5b1..9a27a05 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "echarts": "^5.5.0",
     "element-ui": "^2.15.14",
     "moment": "^2.30.1",
+    "nprogress": "^0.2.0",
     "vue": "^2.6.14",
     "vue-router": "3"
   },
@@ -43,7 +44,6 @@
   },
   "browserslist": [
     "> 1%",
-    "last 2 versions",
-    "not dead"
+    "last 2 versions"
   ]
 }
diff --git a/src/components/layout/dynamicRoute.vue b/src/components/layout/dynamicRoute.vue
index 74dc783..a2c9580 100644
--- a/src/components/layout/dynamicRoute.vue
+++ b/src/components/layout/dynamicRoute.vue
@@ -1,27 +1,71 @@
 <template>
-    <div>
+    <transition name="fade" mode="out-in">
         <router-view></router-view>
-    </div>
+    </transition>
 </template>
 <script>
-    export default{
-        name:'DynamicRoute',
-        data(){
-            return {
+export default {
+    name: 'DynamicRoute',
+    data() {
+        return {
 
-            }
-        },
+        }
+    },
 
-        mounted(){
+    mounted() {
 
-        },
+    },
 
-        methods:{
+    methods: {
 
-        },
+    },
 
-    }
+}
 </script>
 <style scoped>
+.wrapper {
+    width: 100%;
+    min-height: 100vh;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+    transition: all 0.75s ease-out;
+}
+
+
+.slide-enter-to {
+    position: absolute;
+    right: 0;
+}
+
+
+.slide-enter-from {
+    position: absolute;
+    right: -100%;
+}
+
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+
+.slide-leave-to {
+    position: absolute;
+    left: -100%;
+}
+
+
+.slide-leave-from {
+    position: absolute;
+    left: 0;
+}
 
 </style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index bfd6698..b4d2663 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,21 @@
 import Vue from 'vue';
 import VueRouter from "vue-router"
+//引入nprogress 进度条插件
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
 import routes from './routes'
+import nProgress from 'nprogress';
 Vue.use(VueRouter)
-export default new VueRouter({
+const router = new VueRouter({
     mode:'history',
     routes
-})
\ No newline at end of file
+})
+router.beforeEach(async (to, from, next)=>{
+    NProgress.start()
+    next()
+})
+router.afterEach(()=>{
+    NProgress.done()
+})
+
+export default router;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 8d6e331..fc25a39 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4702,6 +4702,11 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
+
 nth-check@^2.0.1:
   version "2.1.1"
   resolved "http://mirrors.csdn.net.cn/repository/csdn-npm-mirrors/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
-- 
GitLab