本文实例为大家分享了Vue使用NProgress进度条的具体代码，供大家参考，具体内容如下
1、安装
npm i -S nprogress2、在router.js中使用
import Vue from 'vue'import Router from 'vue-router'import NProgress from 'nprogress'import 'nprogress/nprogress.css'Vue.use(Router)const router = new Router({ 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; //颜色可修改}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
最新文章
热门文章
猜你喜欢
