vue使用nprogress（進度條）

1.安裝

npm install --save nprogress

2.引入

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

3.配置

NProgress.configure({
	easing: 'ease',  // 動畫方式，和css動畫屬性一樣（默認：ease）
	speed: 500,  // 遞增進度條的速度，單位ms（默認： 200）
	showSpinner: false, // 是否顯示加載ico
	trickle: true,//是否自動遞增
	trickleSpeed: 200, // 自動遞增間隔
	minimum: 0.3, // 初始化時的最小百分比，0-1（默認：0.08）
	parent: '#container'//指定此選項以更改父容器（默認：body）
})

4.使用

 NProgress.start()// 開始
 NProgress.set(0.4) // 設置進度，0-1
 NProgress.inc() // 增加一點點
 NProgress.done() // 完成

5.使用場景

• 路由中使用

    router.beforeEach((to, from , next) => {
    //每次切換頁面時，調用進度條
    	NProgress.start();
    // 這個一定要加，沒有next()頁面不會跳轉的。這部分還不清楚的去翻一下官網就明白了
    	next();
    });
    router.afterEach(() => {
    // 在即將進入新的頁面組件前，關閉掉進度條
    	NProgress.done()
    })
  

• 封裝axios中使用

    //在request攔截器中顯示進度條Nprogress.start()
    axios.interceptors.request.use(config => {
    	  //請求開始時顯示進度條
    	  Nprogress.start()
    	  return config
    })
    //response中完成進度條Nprogress.done()
    axios.interceptors.response.use(config => {
    	  //服務響應時完成進度條
    	  Nprogress.done()
    	  return config
    })
  

6.改變顏色

在App.vue中的style中增加：

#nprogress .bar {
  background: red !important; //自定義顏色
}