vue使用nprogress加载路由进度条的方法


Posted in Javascript onJune 04, 2020

1、效果图

vue使用nprogress加载路由进度条的方法

2、安装

npm install --save nprogress

基本用法

NProgress.start();
NProgress.done();

3、在路由中使用

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
 NProgress.start();
 next();
});

router.afterEach(() => {
 NProgress.done();
});

PS:下面看下Vue使用NProgress的方法

NProgress是页面跳转是出现在浏览器顶部的进度条

官网:http://ricostacruz.com/nprogress/

github:https://github.com/rstacruz/nprogress

如下图所示,绿色的进度条就是NProgress实现的效果

vue使用nprogress加载路由进度条的方法

1、安装

$ npm install --save nprogress 或者
$ yarn add nprogress

//用法
NProgress.start();
NProgress.done();

2、使用

//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
 NProgress.start()
 next()
})

router.afterEach(() => {
 NProgress.done()
})

总结

到此这篇关于vue使用nprogress加载路由进度条的文章就介绍到这了,更多相关vue nprogress路由进度条内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
splice slice区别
Oct 09 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 #Javascript
JS删除数组指定值常用方法详解
Jun 04 #Javascript
Vue项目接入Paypal实现示例详解
Jun 04 #Javascript
Paypal支付不完全指北
Jun 04 #Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 #Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 #Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 #Javascript
You might like
php内核解析:PHP中的哈希表
2014/01/30 PHP
php无限遍历目录示例
2014/02/21 PHP
PHP SOCKET编程详解
2015/05/22 PHP
php实现求相对时间函数
2015/06/15 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
python中二维阵列的变换实例
2014/10/09 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
2014道德模范事迹材料
2014/02/16 职场文书
关于读书的活动方案
2014/08/14 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
解除租赁合同协议书
2016/03/21 职场文书
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers