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 相关文章推荐
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
javascript实现简单页面倒计时
Mar 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在字符串中查找另一个字符串
2008/11/19 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
详解React的回调渲染模式
2020/09/10 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
python错误处理详解
2014/09/28 Python
使用Python生成url短链接的方法
2015/05/04 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
药品质量检测应届生求职信
2013/11/14 职场文书
大学新生军训感言
2014/02/25 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
公民代理授权委托书
2014/09/24 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
2014年人大工作总结
2014/12/10 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
使用tensorflow 实现反向传播求导
2021/05/26 Python
php将xml转化对象的实例详解
2021/11/17 PHP