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 相关文章推荐
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
vue实现匀速轮播效果
Jun 29 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
MYSQL数据库初学者使用指南
2006/11/16 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
php网页病毒清除类
2014/12/08 PHP
php简单日历函数
2015/10/28 PHP
linux下php上传文件注意事项
2016/06/11 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python不规范的日期字符串处理类
2014/06/10 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python 实现任务管理清单案例
2020/04/25 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
彩妆大赛策划方案
2014/05/13 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
2014年教务处工作总结
2014/12/03 职场文书
与死神共舞观后感
2015/06/15 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android