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 1.4 中的Ajax问题
Jan 23 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
vue设置全局访问接口API地址操作
Aug 14 Javascript
JS typeof fn === 'function' && fn()详解
Aug 22 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
Laravel find in set排序实例
2019/10/09 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
python自定义异常实例详解
2017/07/11 Python
Python实现二维数组输出为图片
2018/04/03 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
Pandas分组与排序的实现
2019/07/23 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
在python中修改.properties文件的操作
2020/04/08 Python
Python新手学习raise用法
2020/06/03 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
市场营销毕业生自荐信范文
2014/04/01 职场文书
小学生综合素质评语
2014/04/23 职场文书
村庄绿化方案
2014/05/07 职场文书
妇女工作先进事迹
2014/08/17 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
如何写辞职书
2015/02/26 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
Mysql基础知识点汇总
2021/05/26 MySQL
webpack的移动端适配方案小结
2021/07/25 Javascript
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS