本文介绍 Vue 进度条插件 NProgress 的用法

1. 安装

  1. npm install --save nprogress

2. 引入

在 main.js 文件中引入以下内容

  1. import NProgress from 'nprogress' // nprogress插件
  2. import 'nprogress/nprogress.css'  // nprogress样式

3. 显示声明 Vue 使用该插件

  1. Vue.use(NProgress);

4. 对 NProgress 插件的相关参数进行设置

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

5. 设置 NProgress 插件的加载效果何时显示

第一种显示方式：进入路由前显示进度条，进入路由后关闭进度条。这种方式的缺点是当网速太慢，页面中图片等资源还没有加载完成时，进度条已经关闭。

  1. // 当路由进入前，启动进度条
  2. router.beforeEach((to, from , next) => {
  3.     NProgress.start(); // 每次切换页面时，调用进度条
  4.     next();
  5. });
  7. // 当路由进入后：关闭进度条
  8. router.afterEach(() => {
  9.     NProgress.done(); // 在即将进入新的页面组件前，关闭掉进度条
  10. });

第二种显示方式：页面资源开始加载时显示进度条，页面所有资源加载完成后关闭进度条。这种方式解决了方式一中存在的问题，但当仅有路由跳转、没有待加载的资源时不显示进度条，因此两种方式配合使用效果更好。

  1. Vue.http.interceptors.push((request, next) => {
  2.     NProgress.start();
  3.     next(() => {
  4.         NProgress.done();
  5.     });
  6. });

6. 修改样式

记得使用 !important 来覆盖原有的样式

  1. /**
  2.  * 修改进度条样式
  3.  */
  4. #nprogress .bar {
  5.     background: #fff !important;
  6.     height: 56px !important;
  7.     opacity: 0.5;
  8.     box-shadow: none;
  9. }