Vue使用NProgress

下载插件：

npm install --save nprogress

---

main.js：

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

NProgress.configure({
  easing: 'ease',  // 动画方式
  speed: 500,  // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3 // 初始化时的最小百分比
})

Vue.prototype.NProgress=NProgress;

---

页面上使用：

  beforeCreate(){
  this.NProgress.start();  //加载开始
  },
  mounted() {
    this.NProgress.done(); //加载完成
  },

如果要改变其加载颜色

只要在App.vue写相应的样式即可

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
 #nprogress .bar {
      background: #66b1ff !important; 
    }
</style>