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 ...
随机推荐
- 3.3.4深度剖析ConcurrentLinkedQueue
队列.链表之类的数据结构及其常用.Java中,ArrayList和Vector都是使用数组作为其内部实现.两者最大的不同在于:Vector是线程安全的,而ArrayList不是.此外LinkedLis ...
- java Random类和Math.Rondom
Java中存在着两种Random函数: 一.java.lang.Math.Random; 调用这个Math.Random()函数能够返回带正号的double值,该值大于等于0.0且小于1.0,即取 ...
- JavaEE互联网轻量级框架整合开发(书籍)阅读笔记(12):XML配置自动扫描包,自动加载*.properties文件
一.XML和注解组合使用 前几篇的测试案例都是在Java类中配置,现在换一种使用方式,在XML中配置,使Spring IoC容器在启动之后自动去扫描配置的包路径,扫描加载指定路径下的propertie ...
- ACM 韩信点兵 、n的另一种阶乘、6174的问题
3.6174问题 描述 假设你有一个各位数字互不相同的四位数,把所有的数字从大到小排序后得到a,从小到大后得到b,然后用a-b替换原来这个数,并且继续操作.例如,从1234出发,依次可以得到4321- ...
- js中将时间字符串转换为时间戳
var time = "2017-4-18 09:18"; ; console.info(date);
- Android-自动完成提示框CompletionTextView
自动完成提示框CompletionTextView可以实现以下效果(提示框从那里出来是系统自动处理的): 类似于在百度输入框,输入一个字符,会自动提示很多和这个相关的条目内容 定义自动完成提示框(此控 ...
- mybatis--mapper配置总结
mapper介绍 mapper使用规则:按业务划分,一个业务模块相关的sql均定义在一个mapper文件 mapper的xml格式: doctype: <!DOCTYPE mapper PUBL ...
- Entity Framework异步查询和保存
EF6开始提供了通过async和await关键字实现异步查询和保存的支持(.net 4.5及更高版本).虽然不是所有的操作都能从异步中获益,但是耗时的操作.网络或IO密集型任务中,使用异步可以提升客户 ...
- 二十、Node.js- WEB 服务器 (三)静态文件托管、 路 由
1.Nodejs 静态文件托管 上一讲的静态 web 服务器封装 项目结构: Web服务器封装成的模块:router.js代码: var http=require('http'); var fs=re ...
- [51nod] 1090 3个数和为0 暴力+二分
给出一个长度为N的无序数组,数组中的元素为整数,有正有负包括0,并互不相等.从中找出所有和 = 0的3个数的组合.如果没有这样的组合,输出No Solution.如果有多个,按照3个数中最小的数从小到 ...