vue3加载进度条

使用的插件:加载进度条

npm install nprogress

1. 在main.ts进行引入

import 'nprogress/nprogress.css';//引入加载进度条的样式

2. 在http文件中引入（封装拦截器的位置）

import Nprogress from 'nprogress';//引入加载进度条的样式

报红可以在env.d.ts文件中编写一条代码

/// <reference types="vite/client" />
declare module "js.cookie"//cookie
declare module "vue3-count-to"//数字滚动器
declare module "nprogress"//进度条

3. 同样在http文件，在请求拦截器开启进度条的开启，在响应拦截器结束进度条

// 请求拦截器
instance.interceptors.request.use(function (config) {
    if (config.headers) {
        config.headers['AdminToken'] = Cookies.get("token") + ''
        Nprogress.start()//开启进度条
    }
    return config
}, function (error) {
    console.error('请求错误', error)
    return Promise.reject(error)
}
)

// 需要无痛刷新的操作页面
const METHOD_TYPE = ["_mt=edit", "_mt=create", "_mt=delete"]
// 响应拦截器
instance.interceptors.response.use(async function (response) {
    let data = response.data//强解
    let { errno, errmsg } = data//结构赋值
    let path = router.currentRoute.value.fullPath//获取路径
    console.log(errno, 'errno');

    if (10006 == errno) {
        console.log(11);

        // 获取接口请求数据
        const configData = response.config.data || ''
        console.log(response.config, "response.config");

        // 判断请求类型是否需要无痛刷新，index !== -1则需要无痛刷新
        let index = METHOD_TYPE.findIndex(item => configData.includes(item))
        if (-1 === index) {//需要重新登入获取令牌
            router.replace({ path: "/login", query: { back: path } })//登入后需要跳回的地址
            return
        } else {//需要无痛刷新令牌
            console.log(33);
            const store = useUserStore();
            const { username, password } = store.loginInfo//在状态管理里面定义一个loginInfo
            console.log(store.loginInfo, 666);
            // 1.重新获取令牌
            let loginData = { _gp: 'admin', _mt: 'login', username: username, password };
            const { errno, errmsg, data } = await post(loginData)//这里是通过async 将异步序列化改为同步
            if (200 == errno) {
                console.log(44);
                Cookies.set('token', data)//保存令牌
            } else {
                console.log(55);
                router.replace({ path: "/login", query: { back: path } })//登入后需要跳回的地址
                return Promise.reject({ errno, errmsg, data })
            }
            return instance.request(response.config)
        }
    }
    Nprogress.done()//结束进度条
    return data
}, function (error) {
    console.error('响应错误', error)
    return Promise.reject(error)
}
)

更改进度条样式

方式一：在node_modules文件夹中找到nprogress文件里面的nprogress.css文件进行更改样式

方式二：直接在App.vue文件中进行全局样式更改，更改样式需要添加最高权重

//App.vue文件中
<script setup lang="ts">
import { RouterView } from 'vue-router'

</script>

<template>
  <RouterView />
</template>
<style>
#nprogress .bar {
  background: red !important;
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 50% !important;
  right: 50% !important;
}

#nprogress .spinner-icon {
  width: 40px !important;
  height: 40px !important;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;
  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}
</style>