vue3使用nprogress进度条

一、安装依赖

npm install nprogress --save

二、工具封装

nprogress.ts

import NProgress from "nprogress";
import "nprogress/nprogress.css";
// 开启进度条
export const start = ()=>{
    NProgress.start(); //开启进度条
}
// 关闭进度条
export const stop = ()=>{
    NProgress.done(); //进入之后关闭进度条
}

三、路由中使用

router/index.ts

import {start,stop} from "@/plugins/nprogress";
// ....其他逻辑....
// ...............
// ...............
// 前置拦截
router.beforeEach((to, from, next) => {
  start(); //开启进度条
  next()

})
// 后置拦截
router.afterEach((to, from) => {
  stop(); //进入之后关闭进度条
})

四、修改样式

看个人需求，非强制性操作

#nprogress {
    .bar {
        background: linear-gradient(to right, var(--progress-bar-two), var(--progress-bar), var(--progress-bar-one));
    }
}

五、配置项

这里简单举了例子，其他配置项参考gitHub

点击前往Nprogress的gitHub地址

// 配置项
NProgress.configure({ speed: 500 });