Vue中nprogress页面加载进度条的方法实现


Posted in Javascript onNovember 13, 2020

nprogress页面加载进度条

前言

很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载。这个功能我们可以依靠nprogress来实现,它是轻量级的进度条组件,使用简便,可以很方便集成到应用中来。

Vue中nprogress页面加载进度条的方法实现

安装nprogress

直接在项目中执行安装命令:npm install --save nprogress

Vue中nprogress页面加载进度条的方法实现

nprogress方法

NProgress.start() // 进度条开始
NProgress.set() // 将进度设置到具体的百分比位置,取值范围是0到1.0
NProgress.inc() // 如果少量增加进度,进度将永远不会得到100%
NProgress.done() // 进度条结束消失
NProgress.configure() // 进度条参数配置

全局引入nprogress

在main.js中引入nprogress插件和样式,

import NProgress from ‘nprogress' // nprogress插件
import ‘nprogress/nprogress.css' // nprogress样式

配置nprogress

在NProgress.configure({})中我们可以对nprogress进行适当的配置,showSpinner 为 false(禁用进度环)、trickle 为 false(关闭进度条步进)、trickleRate (每次步进增长多少)、trickleSpeed (步进间隔,单位毫秒ms)、ease(动画方向)、speed (动画速度,单位毫秒ms)、minimum (最小百分比)等等。

NProgress.configure({ showSpinner: false }) //我这里只关闭进度环

Vuerouter路由钩子

在添加nprogress之前我们需要先了解VuerouterbeforeEachafterEach钩子函数,这是在路由跳转的时候对路由进行一些权限判断或者其他操作时定义的处理函数,Vue.beforeEach是在跳转之前执行,Vue.afterEach是在跳转之后执行判断的。

Vue.beforeEach(function(to,form,next){})函数有三个参数,Vue.afterEach(function(to,form))函数有两个参数:

to:即将进入的路由对象

from:当前导航即将离开的路由对象

next:调用该方法,进入下一个钩子函数,next(false):则中断当前的导航。

在路由中添加nprogress

在main.js中全局钩子函数,在路由跳转前用NProgress.start()标记下进度条开始,在路由跳转后用NProgress.done()标记下结束,这样在路由跳转的时候就可以在页面顶部看到一个progress bar进度条了

import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/icons/index.js'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
Vue.use(Element)
Vue.config.productionTip = false
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
 NProgress.start()
 next()
})
router.afterEach(() => {
 NProgress.done()
})
new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

在请求中添加nprogress

如果你希望每次发送请求的时候也出现进度条的话可以在axios封装中的路由拦截中添加nprogress

// 请求拦截器(请求发出前处理一些请求)
axios.interceptors.request.use( 
 NProgress.start()
})
// 响应拦截器(处理响应数据)
axios.interceptors.response.use(
 NProgress.done()
)

为了让结构更滑清晰简洁些,我们重新整理下代码,即然nprogress主要是用在路由跳转上,这里我将nprogress归纳放入router中,切记实例化router之后调用Vuerouter的beforeEach与afterEach钩子函数生效。

import Vue from 'vue'
import Router from 'vue-router'
import routers from './routers'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })
Vue.use(Router)
const router = new Router({
 mode: 'history',
 routes: routers
})
export default router
 
router.beforeEach((to, from, next) => {
 NProgress.start()
 next()
})
router.afterEach(() => {
 NProgress.done()
})

修改nprogress样式

在app.vue中添加如下样式即可修改nprogress样式,记得添加 !important来覆盖原有样式

#nprogress .bar {
 background: #66B1FF !important; // 自定义颜色
 height: 20px !important; // 自定义高度
 }

参考 https://www.toutiao.com/i6718992880599302659/?group_id=6718992880599302659

到此这篇关于Vue中nprogress页面加载进度条的方法实现的文章就介绍到这了,更多相关Vue nprogress加载进度条内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
JavaScript多线程的实现方法
May 08 Javascript
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
JavaScript基本编码模式小结
May 23 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
Vue路由跳转问题记录详解
Jun 15 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
vue 获取url里参数的两种方法小结
Nov 12 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 #Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 #Javascript
解决vuex刷新数据消失问题
Nov 12 #Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 #Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 #Javascript
javascript实现搜索筛选功能实例代码
Nov 12 #Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 #Javascript
You might like
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
PHP 上传文件大小限制
2009/07/05 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
PHP输入流php://input介绍
2012/09/18 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
列表内容的选择
2006/06/30 Javascript
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
《Python学习手册》学习总结
2018/01/17 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
商务英语专业求职信范文
2014/01/28 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB