我们在Vue项目中路由跳转时希望出现一个进度条来显示当前跳转状态,或者在数据发起请求时有个loading提示框来提示当前正在加载数据,本篇文章简单介绍一下我在项目中的使用方法。
路由跳转进度条
NProgress是页面跳转时出现在浏览器顶部的进度条
npm install --save nprogress
复制代码NProgress 使用
// 如果在main.js引入并挂载在Vue实例上,请最在顶部引入,否则会出现问题。
// NProgress最重要两个API就是start()和done(),基本一般用这两个就足够了。
// router.js页面
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
router.beforeEach((to, from, next) => {
NProgress.start() // 显示进度条
next()
})
router.afterEach(() => {
NProgress.done() // 完成进度条
})
复制代码NProgress 高级用法
// (1)百分比:通过设置progress的百分比,调用 .set(n)来控制进度,其中n的取值范围为0-1。
NProgress.set(0.0)
NProgress.set(0.4)
NProgress.set(1.0)
// (2)递增:要让进度条增加,只要调用.inc()。这会产生一个随机增量,但不会让进度条达到100%。
// 此函数适用于图片加载或其他类似的文件加载。
NProgress.inc()
// (3)强制完成:通过传递 true 参数给done(),使进度条满格,即使它没有被显示
NProgress.done(true)
复制代码NProgress 其他配置<