vue 判断页面加载完成_Vue实战040:nprogress页面加载进度条
前言
很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载。这个功能我们可以依靠nprogress来实现,它是轻量级的进度条组件,使用简便,可以很方便集成到应用中来。
安装nprogress
直接在项目中执行安装命令:npm install --save nprogress
nprogress方法
NProgress.start() // 进度条开始NProgress.set() // 将进度设置到具体的百分比位置,取值范围是0到1.0NProgress.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之前我们需要先了解Vuerouter的beforeEach与afterEach钩子函数,这是在路由跳转的时候对路由进行一些权限判断或者其他操作时定义的处理函数,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 = falseNProgress.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可以参考Vue实战037:axios二次封装和使用。
// 请求拦截器(请求发出前处理一些请求)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; // 自定义高度 }
欢迎关注本人的公众号:编程手札,文章也会在公众号更新
vue 判断页面加载完成_Vue实战040:nprogress页面加载进度条相关推荐
- 优酷进度条不能拖动_优酷画面一直加载中,有声音没画面,拖动进度条无效怎么办...
优酷画面一直加载中,有声音没画面,拖动进度条无效: 1.建议用户检查网络稳定性,如果是超清视频,尝试切换成高清或标清模式进行视频观看. 2.暂停其它的下载活动, 如: BT下载.其它P2P软件的数据交 ...
- NProgress.js - 前端全站进度条插件 - 给你的网站添加一个加载进度条
0x00 前言 前几天给博客换了@Veen Zhao大佬的Cuteen主题,非常好看,但是因为不想让自己的博客和其他人的千篇一律,于是决定在Cuteen主题的前提下逐渐设计一些自己需要的东西.正巧前几 ...
- vue音乐卡住_Vue实现mp3音乐播放及动态进度条
今天碰到一个Vue点击mp3播放及进度条动态走动的小功能,记录一下: 首先是通过HTML5 audio标签引入音频: {{footer.title}} {{footer.subTitle}} 在dat ...
- Vue实现大文件分片上传,包括断点续传以及上传进度条
首先解释一下什么是分片上传 分片上传就是把一个大的文件分成若干块,一块一块的传输.这样做的好处可以减少重新上传的开销.比如:如果我们上传的文件是一个很大的文件,那么上传的时间应该会比较久,再加上网络不 ...
- vue 判断对象不为空_Vue 学习笔记(二):实例
创建一个实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项}) 虽然没有完全遵循 MVVM 模型,但是 Vue 的设计 ...
- vue 判断字符串是否是英文_vue rules以及原生js判断字符串是否为正整数(正小数)...
1.在vue中 使用rules形式进行校验 1.首先在vue文件的methods()中添加校验方法,这里校验方法命名为isNumber用自带的.test方法进行正则校验 methods: { isNu ...
- vue 判断json是否为空_vue.js怎么判断对象是否为空?
vue.js怎么判断对象是否为空?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue.js怎么判断对象是否为空? vue有两个方法可用 方法一:JSO ...
- vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景 按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能 导出功能截图 二.安装相关依赖 cnpm install --save xl ...
- vue 判断两对象是否一致_vue - 比较两个Json对象是否相等
// 内容是否有修改 // true:未改变:false:改变了 isChange() { if(this.Compare(this.dialog.detail.form, this.dialog.d ...
最新文章
- ngrok 内网穿透
- Java:包的使用Pack
- 什么是云计算?—Vecloud 微云
- DISTINCT删除重复数据
- 关于vs编码格式UTF8中文处理方式
- 测试常用工具下载地址,LR11、QC11
- TCP三次握手(待细研究)
- php写的仿爱帮网电话号码字符串处理(防采集)。
- PHP使用redis防止大并发下二次写入
- python如何使用ppip安装xlwt_如何安装python xlwt
- 关于主机的思维导图_思维导图可以整理哪些东西?
- 第二章 原理图绘制与检查
- 日程提醒app android,手机里有提醒日程安排的软件吗?
- 安卓手机APP进行自动化点击软件详解
- SAP ABAP 系列丛书推荐:PP 报工
- 自己封装的数据库DbUtils的万能模板
- .csd文件怎么读?--CMU_MOSI_Opinion_Labels.csd
- 使用 RTSCapture 类可以防止帧处理速度小于接收速度而导致花屏或者断流(崩溃)opencv-python RTSP
- GWO-KELM和GWO-SVR代码实现
- 屏蔽网通域名纠错系统