如何在Vue中使用NProgress实现一个进度条效果

本篇文章给大家分享的是有关如何在Vue中使用NProgress实现一个进度条效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

1、安装

npmi-Snprogress

2、在router.js中使用

importVuefrom'vue'
importRouterfrom'vue-router'
importNProgressfrom'nprogress'
import'nprogress/nprogress.css'


Vue.use(Router)

constrouter=newRouter({
mode:'history',
routes:[
]
})

router.beforeEach((to,from,next)=>{
NProgress.start()
///code
})
router.afterEach(()=>{
NProgress.done()
})

3、nprogress的z-index

假如你的header比nprogress的高，可能看不见进度条，可以采用这个办法实施,其中数字比header高就行，或者，你改header的z-index

#nprogress{
.bar{
z-index:15031;
}
.spinner{
z-index:15031;
}
}

4、nprogress修改颜色

#nprogress.bar{
background:red!important;//颜色可修改
}

以上就是如何在Vue中使用NProgress实现一个进度条效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。