nprogress進度條

官網：http://ricostacruz.com/nprogress/

https://www.jianshu.com/p/408583294d61

https://www.jianshu.com/p/610b7c350be8

1、安裝 nprogress

cnpm install nprogress -D

2、引入 nprogress

// 引入nprogress

import NProgress from 'nprogress' // 進度條

import 'nprogress/nprogress.css' //樣式必須引入

3、簡單配置

// 簡單配置

NProgress.inc(0.2)

NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })

4.進度條使用

     調用 start() 和 done() 方法來控制進度條。

NProgress.start(); //開始

NProgress.done(); // 結束

某些場景中的使用：

1、 ajax請求有progress，加載vue-resource的interceptors中

Vue.http.interceptors.push((request, next) => {

  NProgress.start();

  next((response)=>{

    NProgress.done();

  });

});

2、 路由跳轉有progress，加在vue-router的beforeEach和afterEach中

入口檔案,main.js引入 nprogress

import App from './App'

import VueRouter from 'vue-router'

import router from './router' //路由檔案

//引入nprogress

import NProgress from 'nprogress'

import 'nprogress/nprogress.css'

Vue.use(VueRouter)

// 簡單配置

NProgress.inc(0.2)

NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })

router.beforeEach((to,from,next) => {

  NProgress.start()

  next()

})

router.afterEach(() => {

  NProgress.done()

})

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})