vue使用nprogress页面加载进度条
vue使用nprogress页面加载进度条
NProgress是页面跳转是出现在浏览器顶部的进度条
官网:http://ricostacruz.com/nprogress/
github:https://github.com/rstacruz/nprogress
下载 nprogress
npm install --save nprogress
入口文件,main.js引入 nprogress
import App from './App'
import VueRouter from 'vue-router'
import router from './router' //你的路由文件
//引入nprogress
import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' //这个样式必须引入
Vue.use(VueRouter)
// 简单配置
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })
router.beforeEach((to,from,next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
1.引入依赖:
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
简单的调用 start() 和 done() 方法来控制进度条。
NProgress.start(); //开始
NProgress.done(); // 结束
2.如果想ajax请求有progress,加载vue-resource的interceptors中:
Vue.http.interceptors.push((request, next) => {
NProgress.start();
next((response)=>{
NProgress.done();
});
});
3.如果想路由跳转有progress,加在vue-router的beforeEach和afterEach中:
router.beforeEach(transition => {
NProgress.done();
});
router.afterEach(transition => {
NProgress.start();
});
PS: 我这里有些奇葩的是beforeEach在afterEach之后执行。。。。所以我只能在afterEach中start了。。
修改进度条颜色
1、在App.vue中的style中增加:
#nprogress .bar {
background: red !important; //自定义颜色
}
vue使用nprogress页面加载进度条的更多相关文章
- css3 linear-gradient实现页面加载进度条效果
最终效果图: html结构: <div> <p class="p1"> <span></span> < ...
- js页面加载进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ajax页面加载进度条插件
下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...
- jQuery模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
- js页面加载进度条(这个就比较正式了,改改时间就完事儿)
不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...
- 关于各种Vue UI框架中加载进度条的正确使用
这里拿MUSE UI 中的进度条举例 <mu-circular-progress :size="40" class="icon" v-if="i ...
- element admin中使用nprogress实现页面加载进度条
主要是知道是nprogress这个组件实现的就可以了,组件的使用方法可参考:https://blog.csdn.net/ltr15036900300/article/details/47321217 ...
- 插件二之页面加载进度条pace.js
关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...
- 自己写的页面加载进度条jquery插件
(function ($) { var progressId = "progress" + Math.round(Math.random() * 100) var progress ...
随机推荐
- Swig在Mac OS X上的安装
网上有很多类似文章介绍Swig怎么在Mac OS X上安装和配置,一般来说就是: 下载pcre,configure & make & make install 下载swig,confi ...
- PowerDesigner连接MySQL
1.使用JDBC连接,地址:http://dev.mysql.com/downloads/connector/j/ 2.需安装Java(应该只要JRE):http://www.oracle.com/t ...
- CentOS下安装PHP的AMQP扩展方法和步骤
AMQP,即Advanced Message Queuing Protocol,一个提供统一消息服务的应用层标准高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计.基于此协议的客户端 ...
- win7 64位备份时, 无法启动服务,0x80070422
问题:当win7 64位系统在备份的时候,无法启动备份服务,错误代码:0x80070422 解决方法:计算机->管理->服务 找到 Block Level Backup Engine Se ...
- Android-ListView-SimpleCursorAdapter
在上篇博客,Android-ListView-SimpleAdapter,中介绍了SimpleAdapter的使用操作(SimpleAdapter面向的数据是非Cursor数据),而SimpleCur ...
- IE8下window.open 二次无法加载页面
我原先的IE是系统默认自带的IE7,升级到IE8之后,就出现了此现象: 打开一个窗口(window.open方式)后,再打开时,新窗口的页面显示空白,无法加载其内容.关闭ie后,重新偿亦是如此,第一次 ...
- Replication--使用MSlogreader_history查看日志读起的延迟和事务命令
--======================================================================== MSlogreader_history 表存放本地 ...
- 把windows电脑变成路由器使用
实用小技巧1 把windows电脑变成路由器使用 适用对象: windows7.windows8的笔记本电脑或者有无线网卡的台式电脑 网络要求: CMCC-EDU和家里拨号上网的都可以,但是电信的校园 ...
- leetcode 从排序数组中删除重复项
最近的学习是相当的无聊,并且很无趣,每天都浪费了很多时间,比如今天下午,就是搞一手成语接龙,我也是醉了- 并且我也不知道学什么了,所以决定刷题 虽然我是0算法基础,0逻辑能力的渣渣,但是尽力每天做一道 ...
- 使用javascript随机生成斗地主玩家手牌
学习javascript估摸着有半个多月了,好歹自己有过编程基础,学的还算轻松,不过js里的面向对象是真的打脑壳,但都但不懂,和我以前学过的c#简直相差太远 今天写了个随机生成斗地主玩家手牌的代码,自 ...