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操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
AngularJS实现动态添加Option的方法
May 17 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
如何根据业务封装自己的功能组件
Apr 19 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
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
vue实现评论列表功能
2019/10/25 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
pyspark 随机森林的实现
2020/04/24 Python
Django视图类型总结
2021/02/17 Python
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
医务人员自我评价
2014/01/26 职场文书
关于运动会的稿件
2014/02/02 职场文书
小学生元旦感言
2014/02/26 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
群众路线领导对照材料
2014/08/23 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
医院消毒隔离制度
2015/08/05 职场文书
个人道歉信大全
2019/04/11 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
解析Java异步之call future
2021/06/14 Java/Android