实现效果如下:
安装: 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 文件中的样式