Vue项目页面跳转时浏览器窗口上方显示进度条功能


Posted in Javascript onMarch 26, 2020

在vue项目中,为了减少首屏加载的时间,通常会开启路由的懒加载。路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间。

然而,路由懒加载会使得我们在第一次打开一个新页面的时候,会有一个加载时间。如果在这个时候我们没有一个提示的话,给人的感觉会是好像我点了页面跳转但是没反应。所以,这个时候我们可以加一个进度条来告知用户。

具体实现,我们使用NProgress这个滚动条效果插件。

1.安装:

cnpm install --save nprogress

2.在main.js中引入:

import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'

3.在main.js中进行配置:

NProgress.configure({  
 easing: 'ease', // 动画方式 
 speed: 500, // 递增进度条的速度 
 showSpinner: false, // 是否显示加载ico 
 trickleSpeed: 200, // 自动递增间隔 
 minimum: 0.3 // 初始化时的最小百分比
})

4.在main.js中对路由钩子进行设置:

//当路由进入前
 router.beforeEach((to, from , next) => {
  // 每次切换页面时,调用进度条
 NProgress.start();
 // 若加载时间长且不定,担心进度条走完都没有加载完,可以调用

NProgress.inc();//这会以随机数量递增,且永远达不到100%,也可以设指定增量
 next();
 });
//当路由进入后:关闭进度条
router.afterEach(() => { 
 // 在即将进入新的页面组件前,关闭掉进度条
 NProgress.done()
})

补充:vue页面跳转方法

vue2.0在使用的过程中, .vue文件之间的跳转,需要在router里面配置path,通过路径跳转,html文件跳转如下:

<router-link to="/path"><button>跳转</button></router-link>

但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,方法如下:

this.$ router.push({path: ‘/…'}); path为跳转路径,此方法会产生历史记录
this.$ router.push({name:'…'}) name也可以作为路由跳转
this.$ router.push({path:‘home',query:{obj:'…'}}) query:参数,可通过this.$ route.query.obj获取
this.$ router.push({path:‘home',params:{obj:'…'}}) query:参数,可通过this.$route.params.obj获取
this.$router.replace() 此方法不会产生历史记录
this.$router.go(n) 向前或向后跳转n个页面

总结

到此这篇关于Vue项目页面跳转时浏览器窗口上方显示进度条功能的文章就介绍到这了,更多相关vue 页面跳转进度条内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jquery图片放大镜效果
Jun 23 jQuery
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
微信小程序实现底部弹出框
Nov 18 Javascript
JavaScript定时器使用方法详解
Mar 26 #Javascript
js实现时钟定时器
Mar 26 #Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 #Javascript
原生JS实现留言板
Mar 26 #Javascript
vue在线动态切换主题色方案
Mar 26 #Javascript
javascript实现简单搜索功能
Mar 26 #Javascript
jQuery实现html可联动的百分比进度条
Mar 26 #jQuery
You might like
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
Laravel5中contracts详解
2015/03/02 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
XENON基于JSON变种
2010/07/27 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
vue slots 组件的组合/分发实例
2018/09/06 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
python快速排序代码实例
2013/11/21 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
python 除法保留两位小数点的方法
2018/07/16 Python
python获取引用对象的个数方式
2019/12/20 Python
python实现数字炸弹游戏程序
2020/07/17 Python
浅析NumPy 切片和索引
2020/09/02 Python
pymysql模块使用简介与示例
2020/11/17 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
校园歌咏比赛主持词
2014/03/18 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
手机销售员岗位职责
2015/04/11 职场文书
给朋友的道歉短信
2015/05/12 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python