Vue使用NProgress进度条 zindex

1、安装

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; //颜色可修改
}