在vue项目中使用Nprogress.js进度条的方法


Posted in Javascript onJanuary 31, 2018

NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画。NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中。

Ajaxyy应用程序的细长进度条。灵感来自Google,YouTube和Medium。

在vue中使用nprogress.js

安装

$ bower install --save nprogress
$ npm install --save nprogress

在项目中引入

在main.js中引入要使用的nprogress

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

基本用法

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

在路由页面跳转使用

同样在main.js中

router.beforeEach((to, from, next) => {
if (to.path == '/login') {
 sessionStorage.removeItem('username');
 }
let user = sessionStorage.getItem('username');
if (!user && to.path != '/login') {
 next({path: '/login'})
 } else {
 NProgress.start();
 next()
 }
});
router.afterEach(transition => {
 NProgress.done();
});

总结

以上所述是小编给大家介绍的在vue项目中使用Nprogress.js进度条的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript dom 操作详解 js加强
Jul 13 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
JavaScript设计模式初探
Jan 07 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
Textarea输入字数限制实例(兼容iOS&安卓)
Jul 06 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
JavaScript实现筛选数组
Mar 02 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 #Javascript
微信小程序App生命周期详解
Jan 31 #Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 #jQuery
微信小程序switch组件使用详解
Jan 31 #Javascript
vue项目中导入swiper插件的方法
Jan 30 #Javascript
微信小程序实现手势图案锁屏功能
Jan 30 #Javascript
简单理解Vue中的nextTick方法
Jan 30 #Javascript
You might like
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
Javascript实现的简单右键菜单类
2015/09/23 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
python爬虫的工作原理
2017/03/05 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
python把一个字符串切开的实例方法
2020/09/27 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
美国网上书店:Barnes & Noble
2018/08/15 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
行政人事岗位职责
2014/03/17 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
2014年国庆节寄语
2014/09/19 职场文书
环卫工作个人总结
2015/03/04 职场文书
消夏晚会主持词
2015/06/30 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android
PHP 时间处理类Carbon
2022/05/20 PHP