Vue中的NProgress

NProgress 是什么？

      NProgress是页面加载进度条，如下图所示:

   NProgress 官方介绍：​​http://ricostacruz.com/nprogress/​​

   NProgress Github代码：​​https://github.com/rstacruz/nprogress​​

NProgress 怎么使用？

      1、安装

npm install nprogress --save

      2、导包

import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' // 进度条样式

      3、对NProgress 进行配置

NProgress.configure({ showSpinner: false }) // NProgress 配置 ，showSpinner: false 表示禁用右边的环形进度条

      4、使用

router.beforeEach(async(to, from, next) => {
  console.log("路由跳转之前");
//显示进度条
  NProgress.start();

  //继续向下执行
  next();
});

router.afterEach(() => {
  console.log("路由跳转之后");
//结束进度条
  NProgress.done();
});