Vue3页面加载虚拟进度条

部分数据量大的页面，或者在用户网络环境差的情况下，页面顶部的虚拟进度条会给用户带来更好的体验，给用户一种“正在加载页面”的感觉，而不是点击后干巴巴的等待，现在有现成的框架，使用起来也非常简单。

npm install --save nprogress

开启与关闭

NProgress.start();
NProgress.done();

例如我们可以在路由加载的时候使用

import router from '@/router';
    import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

const whiteList = ["/login"]
router.beforeEach(async (to, from, next) => {
    NProgress.start(); // 开启顶部加载动画
    if (whiteList.indexOf(to.path) > -1) {
        next()
        NProgress.done(); // 关闭顶部加载动画
    } else {
        next("/login")
        NProgress.done();
    }
})

或者在axios请求响应拦截器使用

import axios from "axios"
import NProgress from "nprogress"
import "nprogress/nprogress.css"

const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(config => {
    NProgress.start()
)

// 响应拦截器
service.interceptors.response.use(response => {
    NProgress.done()
)
export default service