安装
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; //自定义颜色
}