效果:![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f2da12474c54ecb38a7626f33333d190.png)
1.安装
npm install --save nprogress // 或者yarn add nprogress
//用法
NProgress.start();
NProgress.done();
2.VUE(React 2.2)使用
2.1在入口文件main.js中使用,引入 nprogress
import NProgress from 'nprogress' // 引入nprogress插件
import 'nprogress/nprogress.css' // 这个nprogress样式必须引入
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
2.2写在axios的请求拦截器和响应拦截器里
每次只要触发axios请求就加载进度条
// axios请求拦截器
axios.interceptors.request.use(
config => {
NProgress.start() // 设置加载进度条(开始..)
return config
},
error => {
return Promise.reject(error)
}
)
// axios响应拦截器
axios.interceptors.response.use(
function(response) {
NProgress.done() // 设置加载进度条(结束..)
return response
},
function(error) {
return Promise.reject(error)
}
)
3.样式
#nprogress .bar {
background: red !important; //自定义颜色
}