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 ie6兼容position:fixed实现思路
Apr 01 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
babel基本使用详解
Feb 17 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
解决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
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
收集的几个Python小技巧分享
2014/11/22 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
django-初始配置(纯手写)详解
2019/07/30 Python
Django框架表单操作实例分析
2019/11/04 Python
python性能测试工具locust的使用
2020/12/28 Python
性能服装:HYLETE
2018/08/14 全球购物
行政人员岗位职责
2013/12/08 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
竞聘自述材料
2014/08/25 职场文书