添加路由切换进度条

Author: SmallRuralDog

package-lock.json

@@ -38,6 +38,7 @@
     },
     "dependencies": {
         "mavon-editor": "^2.9.0",
+        "vue-progressbar": "^0.7.5",
         "vue-router": "^3.0.7"
     }
 }

package.json

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=190b46b5c5b17be83269",
+    "/app.js": "/app.js?id=539927ce4cc89229d5e7",
     "/manifest.js": "/manifest.js?id=8991394a854ee5cdffc3",
     "/vendor.js": "/vendor.js?id=df0be4950fcb717193ba"
 }

public/app.js

@@ -10,6 +10,18 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI, { size: 'small' });
 
+import VueProgressBar from 'vue-progressbar'
+
+const options = {
+    color: "#409EFF",
+    failedColor:"#F56C6C",
+    thickness: '4px',
+    position:"absolute",
+    autoFinish:false,
+}
+
+Vue.use(VueProgressBar, options);
+
 
 
 

public/mix-manifest.json

@@ -128,9 +128,11 @@
             </div>
           </div>
         </el-header>
-        <el-main :class="{ 'el-main-fixed': fixedHeader }">
+        <el-main :class="{ 'el-main-fixed': fixedHeader }" style="position: relative;">
+          <vue-progress-bar></vue-progress-bar>
           <div class="layout-content-main">
             <router-view></router-view>
+            
           </div>
         </el-main>
         <el-footer class="admin-footer" height="auto">
@@ -260,7 +262,6 @@ export default {
     this.$bus.on("message", ({ type, message }) => {
       this.$message[type](message);
     });
-
     this.$nextTick(() => {
       window.rootFooterHeight = this.$refs.rootFooter.offsetHeight + 60;
     });

resources/js/Admin.js

@@ -69,6 +69,7 @@ export default {
         this.loading = false;
         this.reload = false;
       } else {
+        this.$Progress.start();
         this.$store
           .dispatch("getCenten", {
             path: this.pathKey,
@@ -79,8 +80,11 @@ export default {
           })
           .then((data) => {
             this.componentData = data;
+            this.$Progress.finish();
+          })
+          .catch(() => {
+            this.$Progress.fail();
           })
-          .catch(() => {})
           .finally(() => {
             this.loading = false;
             this.reload = false;