Vue使用NProgress进度条的方法

(编辑：jimmy 日期: 2026/4/28 浏览：3 次 )

本文实例为大家分享了Vue使用NProgress进度条的具体代码，供大家参考，具体内容如下

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：vue配置nprogress实现页面顶部进度条
下一篇：NProgress显示顶部进度条效果及使用详解