vue顶部进度条 Nprogress

效果

1. 安装插件

npm install --save nprogress

yarn add nprogress

2. 封装nprogress

因为我们路由跳转和接口调用都要用到，所以封装起来。

// src/utils/nprogress.ts  路径随意，建个文件就行了，我这里是vue3 ＋ ts，用vue2 + js也一样。

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

//全局进度条的配置
NProgress.configure({ 
    easing: 'ease',  // 动画方式    
    speed: 1000,  // 递增进度条的速度
    showSpinner: false, // 是否显示加载icon
    trickleSpeed: 100, // 自动递增间隔    
    minimum: 0.3 // 初始化时的最小百分比
})

// 打开进度条
export const start = ()=>{
    NProgress.start()
}

// 关闭进度条
export const close = ()=>{
    NProgress.done()
}

3. 路由跳转使用

• 根据个人情况，在自己路由守卫的文件引入

import { start, close } from '@/utils/nprogress';

router.beforeEach(async (to, from, next) => {
	// 开启加载进度条
	start();
})

router.afterEach(() => {
	// 关闭加载进度条
    close();
});

4. 调用接口使用

• 在封装axios请求文件使用 请求拦截器和响应拦截器

import { start, close } from '@/utils/nprogress'

// 请求拦截器
$http.interceptors.request.use(config => {
    start();
    ......
    return config;
});

// 响应拦截器
$http.interceptors.response.use(res => {
    close();
    .......
    return res.data;
}, err => {
    console.log(err);
})

5. 修改进度条样式

• 可以直接在App.vue 文件修改

#nprogress .bar {
  // 这个颜色是csdn顶部进度条的颜色，根据自己喜爱修改
  background-color: #FC5531  !important;
  height: 4px !important;
}

6. 完成效果