vue 页面加载进度条，页面跳转进度条

安装:

cnpm install --save nprogress

nprogress.js

//引⼊nprogress
import NProgress from 'nprogress'

import 'nprogress/nprogress.css' //这个样式必须引⼊
NProgress.configure({     
  easing: 'ease',  // 动画⽅式
  speed: 500,  // 递增进度条的速度
  showSpinner: false, // 是否显⽰加载ico    
  trickleSpeed: 200, // ⾃动递增间隔
  minimum: 0.3 // 初始化时的最⼩百分⽐
})
export default NProgress;

使用：

//引⼊页⾯加载进度条
import NProgress from '@/utils/nprogress';
.....
const router = new VueRouter({
  routes,
  // mode: 'history'
})
router.beforeEach((to, from , next) => {
  // 每次切换页⾯时，调⽤进度条
  NProgress.start();
  // 这个⼀定要加，没有next()页⾯不会跳转的。这部分还不清楚的去翻⼀下官⽹就明⽩了
  next();
});
router.afterEach(() => {  
  window.scrollTo(0,0);
  // 在即将进⼊新的页⾯组件前，关闭掉进度条
  NProgress.done()
})
export default router