网页顶部进度条效果nprogress

可用于路由跳转和异步请求中
路由逻辑中：router/index.js

//
import NProgress from 'nprogress'  
import 'nprogress/nprogress.css'
// 一些配置
NProgress.configure({
  showSpinner:false,    // 进度环隐藏
  easing:'ease',
  speed:500,
  trickle:false
})
NProgress.set(0.9999)    // 控制进度条长度,取值范围(min,0.999),取1又回到min
NProgress.inc(0.3)           // 使其不加载到 100%,作用和set差不多,是在set的基础上
//

set和inc的参数数值都是有范围的，不在范围内的数值不会生效。

const router = new VueRouter({
    routes,
    mode:'history'
})
//
// 路由的生命钩子函数
router.beforeEach((to, from, next) => {
  NProgress.start();    // 进度条出现
  next();
})

router.afterEach(() => {
  // NProgress.done();     // 进度条消失
})
//

nprogress页面加载进度条
NProgress全局顶部进度条
NProgress
Nprogress进度条

#nprogress .bar {
  background: rgb(0, 255, 55) !important; 
}

可以在App.vue中控制样式，但是要加 !important，并且不要 scoped