在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 (用setTimeout而非setInterval)
Dec 28 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
js实现开关灯效果
Mar 30 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
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函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
React组件refs的使用详解
2018/02/09 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
Python列表与元组的异同详解
2019/07/02 Python
简单了解django文件下载方式
2020/02/10 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
机电一体化应届生求职信范文
2014/01/24 职场文书
优秀求职信范文分享
2014/01/26 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
上班迟到检讨书
2014/09/15 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
MyBatis 动态SQL全面详解
2021/10/05 MySQL