Vue使用NProgress进度条的方法
人气:01、安装
npm i -S nprogress
2、在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; //颜色可修改 }
您可能感兴趣的文章:
加载全部内容