在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编程起步(第二课)
Feb 27 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
使用AOP改善javascript代码
May 01 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
如何用Node.js编写内存效率高的应用程序
Apr 30 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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配置文件中最常用四个ini函数
2007/03/19 PHP
两个强悍的php 图像处理类1
2009/06/15 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
PHP图片水印类的封装
2017/07/06 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
js快速排序的实现代码
2013/12/08 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python实现的二维码生成小软件
2014/07/11 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
信息服务专业毕业生求职信
2014/03/02 职场文书
市场部经理岗位职责
2014/04/10 职场文书
作文批改评语大全
2014/04/23 职场文书
超市周年庆活动方案
2014/08/16 职场文书
政协会议宣传标语
2014/10/09 职场文书
Redis唯一ID生成器的实现
2022/07/07 Redis