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 相关文章推荐
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
巧用canvas
Jan 21 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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获取某个目录大小的代码
2008/09/10 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
改进Django中的表单的简单方法
2015/07/17 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
Python实现某论坛自动签到功能
2019/08/20 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
python中加背景音乐如何操作
2020/07/19 Python
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
青年创业培训欢迎词
2014/01/08 职场文书
同学聚会通知短信
2015/04/20 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript