效果图：

image.png

1.介绍：

我们在vue项目中，为了减少首屏加载的时间，通常会开启路由的懒加载。路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间。然而，路由懒加载会使得我们在第一次打开一个新页面的时候，会有一个加载时间。如果在这个时候我们没有一个提示的话，给人的感觉会是好像我点了页面跳转但是没反应。所以，这个时候我们可以加一个进度条来告知用户。

• 具体实现，我们使用NProgress这个滚动条效果插件。

2.安装

cnpm install --save nprogress

3.配置和引入

新建一个 utils 文件夹，新建一个 nprogress.js 文件

image.png

• nprogress.js

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

NProgress.configure({     
  easing: 'ease',  // 动画方式    
  speed: 500,  // 递增进度条的速度    
  showSpinner: false, // 是否显示加载ico    
  trickleSpeed: 200, // 自动递增间隔    
  minimum: 0.3 // 初始化时的最小百分比
})
export default NProgress;

4.使用

在 route.js 文件引入使用

• route.js

//引入页面加载进度条
import NProgress from '@/utils/nprogress';
.....
const router = new VueRouter({
  routes,
  // mode: 'history'
})
router.beforeEach((to, from , next) => {
  // 每次切换页面时，调用进度条
  NProgress.start();

  // 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
  next();
});
router.afterEach(() => {  
  window.scrollTo(0,0);
  // 在即将进入新的页面组件前，关闭掉进度条
  NProgress.done()
})

export default router

5.修改进度条颜色

// 修改进度条颜色 // 1、在App.vue中的style中增加：

nprogress .bar { background: red !important;} (一定要加上!important )

<style lang="less">
#app {
  max-width: 100vw;
  box-sizing: border-box;
  min-height: 100vh;
  overflow: hidden;
}
// 修改进度条颜色
// 1、在App.vue中的style中增加：
#nprogress .bar { background: red !important;}
</style>