Vue顶部进度条工具nprogress使用

NProgress是页面跳转是出现在浏览器顶部的进度条
官网：NProgress: slim progress bars in JavaScript
github：GitHub - rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc

nprogress安装：

npm install --save nprogress

可以引入进度条的样式  修改进度条相关样式 代码如下：

import "nprogress/nprogress.css";

nprogress的方法

基本使用：我们可以通过使用start() 以及done()实现进入条的开始和结束基本使用 代码如下：

可以用在切换路由的进入和离开顶部进度条展示 代码如下：

router.beforeEach((to, from, next) => {
  nprogress.start()
  next()
})

router.afterEach(() => {
  nprogress.done()
})

也可以结合你所配置的封装了axios请求拦截器和响应拦截器中使用 例子如下：

其中requests是axios的封装函数

import axios from 'axios';
// requests就是axios 下列操作只是配置请求拦截器和响应拦截器
    
const requests=axios.create({
        //配置对象
        //基本路径 发请求的时候 路径会出现api
            baseURL:"/api",
            timeout:5000,
})

//请求拦截器
requests.interceptors.request.use((config)=>{
    //进度条开始动
    nprogress.start();
    return config; 
});

//响应拦截器
requests.interceptors.response.use((res)=>{
    nprogress.done();
    return res.data;
},(error)=>{
    return Promise.reject(new Error('faile'));
});


export default requests;

默认的进度条样式是蓝色的 如下：

 如果有需求想修改进度条的样式可以在node_modules中找到nprogress.css文件

修改.bar的颜色就可以修改顶部进度条的颜色