vue 项目 使用 nprogress - 页面加载进度条

安装

npm install --save nprogress

在路由钩子函数中使用及配置

import NProgress from 'nprogress'
import router from '@/router' // vue-cli 生成出来的router函数

// 进度条配置
NProgress.configure({
  showSpinner: false, // 关闭loading动画
  trickle: false, // 关闭进度条步进
  minimum: 0.1, // 最小百分比
  ease: 'ease', // 过度动画
  speed: 500, // 速度（毫秒）
  trickleRate: 0.02, // 每次步进增长多少
  trickleSpeed: 800 // 步进间隔
})

// 路由钩子函数 - 跳转前打开进度条
router.beforeEach((to, from, next) => {
  NProgress.start() // 开始进度条

  // 这里为了看得清晰一些加了一个定时器，正式使用请去掉
  setTimeout(() => {
    next()
  }, 1000)
})

// 路由钩子函数 - 跳转后完成进度条加载
router.afterEach(() => {
  NProgress.done() // 完成进度条
})

进度条颜色修改

在App.vue的style中加入以下代码来修改进度条颜色

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