提交

package-lock.json

@@ -12,6 +12,7 @@
         "core-js": "^3.8.3",
         "element-plus": "^2.3.7",
         "masonry-layout": "^4.2.2",
+        "nprogress": "^0.2.0",
         "sass-loader": "^8.0.0",
         "vue": "^3.2.13",
         "vue-meta": "^3.0.0-alpha.2",
@@ -7208,6 +7209,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -15847,6 +15853,11 @@
         "path-key": "^2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "core-js": "^3.8.3",
     "element-plus": "^2.3.7",
     "masonry-layout": "^4.2.2",
+    "nprogress": "^0.2.0",
     "sass-loader": "^8.0.0",
     "vue": "^3.2.13",
     "vue-meta": "^3.0.0-alpha.2",

src/main.js

@@ -24,7 +24,8 @@ import {
   ElSkeletonItem,
   ElBreadcrumb,
   ElAffix,
-  ElConfigProvider
+  ElConfigProvider,
+  ElProgress
   // 其他需要的组件
 } from 'element-plus'
 
@@ -67,6 +68,7 @@ app.use(ElSkeletonItem)
 app.use(ElMessage)
 app.use(ElBreadcrumb)
 app.use(ElAffix)
+app.use(ElProgress)
 
 app.use(ElConfigProvider)
 

src/router/index.js

@@ -2,6 +2,17 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import { setSeoTitle } from '@/utils/util.js'
 import store from '@/store'
+//导入包
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+NProgress.configure({
+  easing: "ease", // 动画方式
+  speed: 2500, // 递增进度条的速度
+  showSpinner: false, // 是否显示加载ico
+  trickleSpeed: 200, // 自动递增间隔
+  minimum: 0.9, // 初始化时的最小百分比
+});
 
 const routes = [
   {
@@ -120,10 +131,18 @@ const router = createRouter({
 
 
 router.beforeEach((to, from, next) => {
+  //进度条开始
+  NProgress.start();
+  //随机增加进度
+  NProgress.inc();
+
   next()
   let meta = to['meta'] || {}
   let title = meta['title']
   if (title) setSeoTitle(title)
 })
 
+router.afterEach(() => {
+  NProgress.done();
+})
 export default router