Vue使用NProgress
Posted David凉宸
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue使用NProgress相关的知识，希望对你有一定的参考价值。
适用于Ajax 类型应用程序的超薄进度条
安装NProgress包
- 方法一： npm install --save nprogerss
- 方法二：在图形化界面中搜索nprogress安装运行依赖
导入 NProgress 包
- import NProgress from ‘nprogress’
- import ‘nprogress/nprogress.css’
在 request 拦截器中，展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
NProgress.start()
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须 return config
return config
})
在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
NProgress.done()
return config
})
官方：https://ricostacruz.com/nprogress/
以上是关于Vue使用NProgress的主要内容，如果未能解决你的问题，请参考以下文章