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.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 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/12/07 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
深入认识JavaScript中的函数
2007/01/22 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
Sea.JS知识总结
2016/05/05 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
js实现简单扫雷
2020/11/27 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
linux下python抓屏实现方法
2015/05/22 Python
python结合API实现即时天气信息
2016/01/19 Python
Tornado 多进程实现分析详解
2018/01/12 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
吃空饷专项治理工作实施方案
2014/03/04 职场文书
高一学生期末评语
2014/04/25 职场文书
投资意向书
2014/07/30 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
龙猫观后感
2015/06/09 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript