在Vue使⽤NProgress加载进度条
NProgress是页⾯跳转是出现在浏览器顶部的进度条官⽹：ricostacruz/nprogress/ github：github/rstacruz/nprogress
1. 安装
npm install --save nprogress
// 或者
yarn add nprogress
//⽤法
NProgress.start();
NProgress.done();
2. 使⽤
⼊⼝⽂件,main.js引⼊ nprogress
import Vue from'vue'
import App from'./App'
import router from'./router'
import axios from'axios'
import NProgress from'nprogress'// 引⼊nprogress插件
import'nprogress/nprogress.css'// 这个nprogress样式必须引⼊
写在axios的请求和响应⾥，每次只要触发axios请求就加载进度条
// axios请求
quest.use(
config =>{
NProgress.start()// 设置加载进度条(开始..)
return config
},
error =>{
ject(error)
}
)
// axios响应
sponse.use(
function(response){
NProgress.done()// 设置加载进度条(结束..)
return response
},
function(error){
ject(error)
}
)
或者⽹上很多⼈写在了router.beforeEach和router.afterEach，这种写法只能切换路由时才有效果。
个⼈感觉写在axios的请求和响应⾥⽐较好，因为切换路由⼀般都会触发页⾯的created()事件发起axios请求
//导⼊
js控制css3动画触发import NProgress from'nprogress'
import'nprogress/nprogress.css'
router.beforeEach((to,from, next)=>{
NProgress.start()
next()
})
router.afterEach(()=>{
NProgress.done()
})
以上两种⽅法也可以同时⼀起写上！
最好在index.html也写上，单页⾯⾸次打开速度慢，这样写打开登陆页时也才会显⽰！
<script>
NProgress.start()
// 给页⾯设置请求加载进度条效果
NProgress.done()
}
</script>
可以更改设置样式：
#nprogress .bar {
background: red !important;//⾃定义颜⾊
}
配置NProgress:
1. showSpinner：进度环显⽰隐藏
2. ease：调整动画设置，ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。
speed为动画速度（单位ms）。
3. inimum：设置最低百分⽐
4. 百分⽐：通过设置progress的百分⽐，调⽤ .set(n)来控制进度，其中n的取值范围为0-1。
NProgress.set(0.4);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。