作用:NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情!
在用户切换页面的时候,可以看到网页正在加载的过程
官网:https://ricostacruz.com/nprogress/
1、安装
npm install nprogress
2、基本使用方法
(1)使用
router/index.js
中引入
// 引入NProgress进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 路由守卫
router.beforeEach((to,from,next)=>{
// 进度条
NProgress.start()
next()
})
router.afterEach(()=>{
NProgress.done()
})
(2)修改样式
在全局CSS文件中写入(也可以独立出一个css文件,在页面处单独引入)
// 修改进度条颜色
#nprogress .bar {
background: red !important;
}
(3)其他方法
① 显示进度条
NProgress.start()
② 进度条加载完成
NProgress.done()
③ 设置进度条加载的百分比
NProgress.set(0.4)
④ 进度条增加一点点
NProgress.inc()