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 学习之一 对象访问
Nov 23 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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中url函数介绍及使用示例
2014/02/13 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
php实现网站留言板功能
2015/11/04 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[02:27]刀塔重生降临
2015/10/14 DOTA
Python实现的三层BP神经网络算法示例
2018/02/07 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
几个判断型的面试题
2012/07/03 面试题
《青蛙看海》教学反思
2014/04/23 职场文书
员工保密承诺书
2014/05/28 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL