vue3使用NProgress顶部进度条
vue3使用NProgress顶部进度条
NProgress是一个轻量级的进度条组件,在Github上已经2.4万star数了,虽然这个组件已经好久没有更新了,最近一次更新是20年4月份,改了jQuery的版本,但是该组件的使用频率还是高的。
插件安装
$ npm install --save nprogress
$ yarn add nprogress
插件使用
App.vue
<script lang="ts">
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { useRouter } from "vue-router";
export default {
setup() {
const router = useRouter();
router.beforeEach((to, from, next) => {
NProgress.start();
next();
});
router.afterEach(() => {
NProgress.done();
});
},
};
</script>
axios中使用
main.ts
import 'nprogress/nprogress.css'
axios.ts
import NProgress from 'nprogress'
axios.interceptors.request.use(
function (config: any) {
// 在发送请求之前做某件事
NProgress.start() //开始
return config
},
(error: { data: { error: { message: any } } }) => {
return Promise.reject(error.data.error.message)
}
)
axios.interceptors.response.use(
function (config: any) {
aspShow.value = false
NProgress.done() //结束
if (config.status === 200 || config.status === 204) {
return Promise.resolve(config)
}
return Promise.reject(config)
},
function (error: any) {
aspShow.value = false
NProgress.done() //结束
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {}
})
break
// 其他错误,直接抛出错误提示
default:
message.error(`${error.response.status}:${error.response.statusText}`)
}
NProgress.done()////结束
return Promise.reject(error)
}
}
)
路由中使用
import NProgress from 'nprogress'
// 页面切换之前取消上一个路由中未完成的请求
router.beforeEach((_to: any, _from: any, next: () => void) => {
NProgress.start()
next()
})
router.afterEach(() => {
// 进度条
NProgress.done()
})
全局配置
//全局进度条的配置
NProgress.configure({
easing: 'ease', // 动画方式
speed: 1000, // 递增进度条的速度
showSpinner: false, // 是否显示加载ico
trickleSpeed: 200, // 自动递增间隔
minimum: 0.3, // 更改启动时使用的最小百分比
parent: 'body', //指定进度条的父容器
})
import NProgress from "nprogress";
shims-vue.d.ts
TS的项目,还需要安装其类型声明文件,命令如下:
npm i @types/nprogress -D
或者如下声明
declare module 'nprogress';