Vue - 进度条插件（NProgress）

官方网站： http://ricostacruz.com/nprogress/
文件包下载地址： https://download.csdn.net/download/Jie_1997/12440294

一. 使用方法

NProgress.start() — 显示进度条
NProgress.set(0.4) —将进度设置到具体的百分比位置
NProgress.inc() — 增加一点点进度
NProgress.done() — 完成进度条

二. 使用场景

1. 页面加载的效果： 开始页面 开始进度条； 页面加载好 结束进度条。

   $(function () {
       NProgress.start();
       $(window).load(function () { })
       NProgress.done();
   })
   

2. ajax发送的效果： 开始发送 开始进度条; 成功后 结束进度条。

   此方法挂在window上，监听项目中所有的ajax请求。

   $(window).ajaxStart(function () {
       NProgress.start();
   });
   $(window).ajaxStop(function () {
       NProgress.done();
   });
   

三. Vue 中使用 NProgress

1. 安装NProgress
   npm install --save nprogress

2. main.js中引用NProgress的 js 与 css

   //导入 nprogress 对应的 js 和 css
   import Nprogress from 'nprogress'
   import 'nprogress/nprogress.css'
   

3. 拦截器中使用

   /**
    * 配置封装axios
    */
   //导入axios
   import axios from 'axios'
   //配置axios请求的根路径
   axios.defaults.baseURL='https://xxxxx'
   // 在 request 拦截器中，展示进度条 Nprogress.start()
   //通过axios拦截器添加token验证
   axios.interceptors.request.use(config=>{
     Nprogress.start()
     //为请求对象，添加 token 验证的 Authorization 字段
     config.headers.Authorization=window.sessionStorage.getItem('token')
     //在最后必须 return config
     return config
   })
   //在 response 拦截器中，隐藏进度条  Nprogress.done()
   axios.interceptors.response.use(config=>{
     Nprogress.done()
     return config
   })
   //挂载原型（axios）
   Vue.prototype.$http=axios