fix:配置过渡动画，加载进度条

babel.config.js

 module.exports = {
+  compact: false,
   presets: [
     '@vue/cli-plugin-babel/preset'
   ]

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"
   ]
 }

src/components/layout/dynamicRoute.vue

 <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

src/router/index.js

 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

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"