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 相关文章推荐
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
简单谈谈javascript高级特性
Sep 04 Javascript
浅谈克隆 JavaScript
Nov 02 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语法速查表
2006/12/06 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
Laravel日志用法详解
2016/10/09 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
JavaScript 继承使用分析
2011/05/12 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
Vue页面骨架屏的实现方法
2018/05/22 Javascript
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
广告设计应届生求职信
2014/03/01 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
学校重阳节活动总结
2015/03/24 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
PHP遍历数组的6种方式总结
2021/11/17 PHP
使用python求解迷宫问题的三种实现方法
2022/03/17 Python