一、安装
npm i nprogress -S
二、常用配置项
1、递增进度条
以随机量递增，将其用于加载
NProgress.inc()
如果要增加特定值，可以将其作为参数传递
NProgress.inc(0.2)
2、动画设置
使用缓动（CSS缓动字符串）和速度（以毫秒为单位）调整动画设置。（默认：ease和200）
NProgress.configure({ easing: ‘ease’, speed: 400 })
通过将加载微调器设置为false来关闭它。（默认值：true）
NProgress.configure({ showSpinner: false })
三、使用
在main.js中引入样式
import 'nprogress/nprogress.css'它默认显示为蓝色进度条，如果想自定义进度条颜色，可在全局css中或在app.vue下写入自己自定义的css样式；
<style>
// 自定义进度条颜色
#nprogress .bar {
background: #e2e2e2 !important;
}
</style>
在路由文件router文件夹的index.js文件中
//引入nprogress 进度条插件
import Vue from 'vue'
import VueRouter from 'vue-router'
import NProgress from 'nprogress'
Vue.use(VueRouter)
// 配置进度条
NProgress.inc()
NProgress.configure({ showSpinner: false })
const routes = [{...}]
const router = new VueRouter({
routes
})
// 页面路由刚开始切换的时候
router.beforeEach(async (to,from,next) => {
// 开启进度条
NProgress.start();
})
// 页面路由切换完毕的时候
router.afterEach(() => {
// 关闭进度条
NProgress.done()
})
export default router
在项目中常见的会把路由守卫（权限等控制）与顶部进度条的使用抽取出来放到一个文件中
如： nprogress.js文件，放在src的根目录下
import router from './router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
NProgress.start()
if (to.path !== '/login') {
if (sessionStorage.getItem("token")) { // 判断当前的token是否存在 ； 登录存入的token
next();
} else {
next({path: '/login'})
}
} else {
next();
}
});
router.afterEach(() => {
NProgress.done()
})
然后在main.js中引入
import '@/nprogress' 到此这篇关于Vue使用NProgress实现页面顶部的进度条显示效果的文章就介绍到这了,更多相关Vue NProgress内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
