Vue使用NProgress的操作过程解析


Posted in Javascript onOctober 10, 2019

这篇文章主要介绍了Vue使用NProgress的操作过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

NProgress是页面跳转是出现在浏览器顶部的进度条

官网:http://ricostacruz.com/nprogress/

github:https://github.com/rstacruz/nprogress

绿色的进度条就是NProgress实现的效果

安装

$ npm install --save nprogress 或者
$ yarn add nprogress

//用法
NProgress.start();
NProgress.done();

使用

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

router.beforeEach((to, from, next) => {
 NProgress.start()
 next()
})

router.afterEach(() => {
 NProgress.done()
})

在App.vue中的style中增加:

#nprogress .bar {
   background: red !important; //自定义颜色
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 #Javascript
使用vscode快速建立vue模板过程详解
Oct 10 #Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 #Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 #Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 #Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 #Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 #Javascript
You might like
php动态生成JavaScript代码
2009/03/09 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
JQuery datepicker 使用方法
2011/05/20 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python while循环使用else语句代码实例
2020/02/07 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
优秀的应届生自荐信
2014/05/23 职场文书
师德师风个人整改措施
2014/10/27 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android