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 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 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
PHP中文乱码解决方案
2015/03/05 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
实现PHP搜索加分页
2016/10/12 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
jQuery的三种$()
2009/12/30 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
jQuery实现本地存储
2020/12/22 jQuery
js实现验证码干扰(动态)
2021/02/23 Javascript
python画环形图的方法
2020/03/25 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
HTML5应用之文件上传
2016/12/30 HTML / CSS
什么是命名空间(NameSpace)
2015/11/24 面试题
班组安全员工作职责
2014/02/01 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
中学生个人自我评价
2014/02/06 职场文书
解除劳动合同证明书
2014/09/26 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
三年级学生期末评语
2014/12/26 职场文书
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技