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/>'

})

Vue使用NProgress 修改颜色

在App.vue中的style中增加：

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