vue 使用 NProgress添加页面加载进度条在vue 使用 NProgress添加页面加载进度条，增加用户体验效果

1、安装

npm install --save nprogress

2、在main.js中引入

import NProgress from 'nprogress'; // 进度条
import 'nprogress/nprogress.css'; //这个样式必须引入


NProgress.inc(0.2);//递增进度条
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false });

1.如果想路由跳转有progress，加在vue-router的beforeEach和afterEach中
router.beforeEach((to,from,next) => {
  NProgress.start() 
  next()
})

router.afterEach(() => {
  NProgress.done()
})

3、修改进度条颜色

在App.vue中的style中增加：

<style>
#nprogress .bar {
  background: blue !important;
}
</style>