界面加载虚拟进度条--vue

1、安装nprogress

npm install --save nprogress

 2、在router/index.js文件中引入并设置

代码如下：

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

NProgress.configure({
  showSpinner: false, // 加载小图标是否显示
  ease: 'ease', // 通过 ease(一个 CSS 中的 easing 值) 调整动画设置
  speed: 500, // 速度 speed （毫秒ms）
  minimum: 0.1, // 通过 minimum 来修改最小百分比
  trickle: false, // 关闭进度条步进，设置 trickle 为 false
  trickleRate: 0.02, // 调整 trickleRate (每次步进增长多少) 
  trickleSpeed: 800, // 步进间隔，单位毫秒ms
})


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

router.afterEach((to, from) => {
  NProgress.done()
})

 效果图如下：