Vue nprogress进度条插件介绍

实现效果如下：

安装：npm install -save nprogress

用法：

//vue中引用
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

 

//方法
NProgress.start() - 显示进度条
NProgress.set(0.4) - 设置百分比
NProgress.inc() - 稍微增加
NProgress.done() - 完成进度(进度条消失)

 

vue中使用： 在路由中使用

//登录前
router.beforeEach((to, from, next) => {
    NProgress.start();
    if (to.path == '/login') {
        sessionStorage.removeItem('user');
    }
    let user = JSON.parse(sessionStorage.getItem('user'));
    if (!user && to.path != '/login') {
        next({
            path: '/login'
        })
    } else {
        next()
    }
})
 
 
//登录后
router.afterEach(transition => {
    NProgress.done();
});

在require.js中引用，在ajax请求前后添加：

//对于axios进行二次封装
import axios from "axios";

//start: 进度条开始 done: 进度条结束
import nprogress from "nprogress";
//如果出现进度条没有显示：一定是你忘记了引入样式了
import "nprogress/nprogress.css";
//底下的代码也是创建axios实例
let requests = axios.create({
  //基础路径
  baseURL: "/api",
  //请求不能超过5S
  timeout: 5000,
});

//请求拦截器----在项目中发请求（请求没有发出去）可以做一些事情
requests.interceptors.request.use((config) => {
  //现在的问题是config是什么?配置对象
  //可以让进度条开始动
  nprogress.start();
  return config;
});

//响应拦截器----当服务器手动请求之后，做出响应（相应成功）会执行的
requests.interceptors.response.use(
  (res) => {
    //进度条结束
    nprogress.done();
    //相应成功做的事情
    return res.data;
  },
  (err) => {
    alert("服务器响应数据失败");
  }
);
//最终需要对外暴露（不对外暴露外面模块没办法使用）
//这里的代码是暴露一个axios实例
export default requests;

怎样修改进度条的颜色？

找到nprogress.css文件中的样式

 

#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}