在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 相关文章推荐
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 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
DedeCms模板安装/制作概述
2007/03/11 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
jquery中动态效果小结
2010/12/16 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
pandas string转dataframe的方法
2018/04/11 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
导游实习生自荐书
2014/01/28 职场文书
学生生病请假条范文
2014/02/16 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
感恩节寄语2015
2015/03/24 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技