Vue项目实战06:nprogress页面加载进度条
博客: https://lvsige.top/
nprogress页面加载进度条
前言
很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载。这个功能我们可以依靠nprogress来实现,它是轻量级的进度条组件,使用简便,可以很方便集成到应用中来。
安装nprogress
直接在项目中执行安装命令:npm install --save 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
之前我们需要先了解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 = 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 routerrouter.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项目实战06:nprogress页面加载进度条相关推荐
- vue 判断页面加载完成_Vue实战040:nprogress页面加载进度条
前言 很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载.这个功能我 ...
- nprogress页面加载进度条
入口文件,main.js引入 nprogress import App from './App' import VueRouter from 'vue-router' import router fr ...
- 浅谈前端实现页面加载进度条以及 nprogress.js 的实现
以前在 Vue 的项目用了 nprogress 这个插件,一直对于其如何得知加载进度充满好奇,最近又看到了「前端如何实现页面加载进度条」这个问题,今天周六恰好一探究竟.以下仅为一家之言,如有异议,欢迎 ...
- js网页顶部线性页面加载进度条,jquery头部线性进度条总结
前言 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 头部LoadingBar线性进度条总结 上面的代码只是静态效 ...
- Vue:页面加载进度条
这段时间在踩Ant design pro Vue的坑,发现了个在手机端页面上经常出现的,加载进度条,效果蛮不错的!记录下来. cnpm install --save nprogress import ...
- php+页面加载进度,基于jQuery实现模拟页面加载进度条_jquery
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
- jquery ajax加载页面进度条,基于jQuery实现模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
- 页面加载进度条改进版
html部分: <div id="loadingbg"></div> <div id="test"><div>& ...
- jquery实现页面加载进度条(转)
实现原理: 根据页面执行js的顺序将遮罩层和loading图片最先显示出来,等到页面加载完成后,用js控制图片消失.既在网页的头部放置一个文字或者图片的 loading 状态,然后页尾载入一段 JS ...
最新文章
- Hive作业优化总结
- aosp 本地版本管理_本地代码版本管理
- (一)准备阶段 2019年研究生数学建模D题《汽车行驶工况构建》
- c语言中二叉树中总结点,C语言二叉树的三种遍历方式的实现及原理
- twitter推文不收录_如何使用Twitter书签保存推文供以后使用
- spring 注释_Spring核心注释
- 计算机应用基础王秀娟,计算机应用基础课教学内容设计分析.doc
- 腾讯视频免费下载安装_怎样下载腾讯视频里的视频
- finereport字段显示设置_QA | 表单如何设置字段显示逻辑?
- ajax异步验证效果展示,AJAX(二)-实现验证码异步验证功能(示例代码)
- 解决虎牙、斗鱼网页端P2P上传&增强虎牙、斗鱼网页端功能!
- XCAP发包工具的使用
- 等什么君计算机音乐,等什么君歌曲大全_等什么君最新歌曲_九酷音乐
- 海森堡量子力学与计算机,量子力学诞生后的120年,没有人真正懂他
- 利用四位共阳数码管显示小数
- LeetCode Daily challenge - Course Schedule
- html用超链接将网页组织在一起,Javaweb-html
- 遇到100万行的 Excel,还没打开,电脑和我都崩溃了,该怎么办?
- GNU和GPL是什么?
- 工作中遇到的问题及解决方案