添加滚动条

package.json

@@ -14,6 +14,7 @@
     "@vueuse/core": "^10.0.2",
     "axios": "^1.3.6",
     "element-plus": "^2.3.3",
+    "nprogress": "^0.2.0",
     "pinia": "^2.0.33",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useLogin } from '@/hooks/useLogin'
+import { start, close } from '@/utils/nprogress'
 const { isLogin, token } = useLogin()
 const routes = [
   {
@@ -31,8 +32,12 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
+  start()
   if (!token.value && to.path !== '/login') next({ path: '/login' })
   if (token.value && to.path == '/login') next({ path: '/home' })
   else next()
 })
+router.afterEach(() => {
+  close()
+})
 export default router

src/utils/nprogress.js

@@ -0,0 +1,18 @@
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+NProgress.configure({
+  easing: 'ease-in', // 动画方式
+  speed: 400, // 递增进度条的速度
+  showSpinner: false, // 进度环显示隐藏
+  trickleSpeed: 200, // 自动递增间隔
+  minimum: 0.6, // 更改启动时使用的最小百分比
+  parent: 'body', //指定进度条的父容器
+})
+// 打开进度条
+export const start = () => {
+  NProgress.start()
+}
+// 关闭进度条
+export const close = () => {
+  NProgress.done()
+}

yarn.lock

@@ -1049,6 +1049,11 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
+
 object-assign@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"