子页面加载动画

src/App.vue

@@ -1,5 +1,10 @@
 <template>
     <div id="app">
+
+        <div v-show="config.loading.subPage" class="loading-bar">
+            <div class="bar-content"></div>
+        </div>
+
         <el-container>
 
             <!-- Header -->
@@ -50,6 +55,7 @@
             </keep-alive>
 
         </el-container>
+
     </div>
 </template>
 
@@ -104,6 +110,7 @@ export default {
         }
     },
     watch: {
+
         // 路由名称
         '$route.name': {
             handler() {
@@ -111,6 +118,7 @@ export default {
                 this.showHeaderDropdown = false;
             }
         },
+
         // 更新储存的设置
         'config.storage': {
             handler(obj) {
@@ -122,6 +130,7 @@ export default {
             },
             deep: true
         },
+
         // 改变字体大小
         'config.storage.fontSize': {
             handler(value) {
@@ -133,6 +142,7 @@ export default {
                 }, 1000);
             }
         }
+
     },
     mounted() {
         var configStr = localStorage.getItem('navConfig');
@@ -147,6 +157,40 @@ export default {
 </script>
 
 <style lang="less">
+.loading-bar {
+    position: absolute;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 0.2rem;
+
+    .bar-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 100%;
+        background-color: @colorPrimary;
+        animation: loadingBar 4s ease-in-out infinite;
+    }
+
+    @keyframes loadingBar {
+        0% {
+            left: 0;
+            width: 0;
+        }
+        50% {
+            left: 0;
+            width: 100%;
+        }
+        100% {
+            left: 100%;
+            width: 0;
+        }
+    }
+}
+
 .main-header {
     display: flex;
     align-items: center;

src/assets/js/config.js

@@ -1,4 +1,7 @@
 let config = {
+    loading: {
+        subPage: false
+    },
     searchEngines: {
         search: {
             title: '搜索',

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 import routes from './routes';
+import config from '../assets/js/config';
 
 Vue.use(VueRouter);
 
@@ -9,4 +10,19 @@ const router = new VueRouter({
     routes
 });
 
+// to, from, next
+router.beforeEach((to, from, next) => {
+    if (to.meta.loadingBar) {
+        config.loading.subPage = true;
+    }
+    next();
+});
+
+// to, from
+router.afterEach((to) => {
+    if (to.meta.loadingBar) {
+        config.loading.subPage = false;
+    }
+});
+
 export default router;

src/router/routes.js

@@ -1,32 +1,42 @@
-import Home from '@/views/Home.vue';
-
 const routes = [
     {
-        path: '/',
         name: 'Home',
-        component: Home
+        path: '/',
+        meta: {
+            loadingBar: true
+        },
+        component: (resolve) => require(['@/views/Home.vue'], resolve)
     },
     {
-        path: '/tools',
         name: 'Tools',
-        component: () => import('@/views/Tools.vue'),
+        path: '/tools',
+        meta: {
+            loadingBar: true
+        },
+        component: (resolve) => require(['@/views/Tools.vue'], resolve),
         children: [
             {
                 path: '/tools/:category/:name',
                 name: 'ToolsDetail',
-                component: () => import('@/views/ToolsDetail.vue')
+                component: (resolve) => require(['@/views/ToolsDetail.vue'], resolve)
             }
         ]
     },
     {
-        path: '/settings',
         name: 'Settings',
-        component: () => import('@/views/Settings.vue')
+        path: '/settings',
+        meta: {
+            loadingBar: true
+        },
+        component: (resolve) => require(['@/views/Settings.vue'], resolve)
     },
     {
-        path: '/about',
         name: 'About',
-        component: () => import('@/views/About.vue')
+        path: '/about',
+        meta: {
+            loadingBar: true
+        },
+        component: (resolve) => require(['@/views/About.vue'], resolve)
     }
 ];