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页面加载进度条的更多相关文章

  1. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  2. js页面加载进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

  4. jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

  5. js页面加载进度条(这个就比较正式了,改改时间就完事儿)

    不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...

  6. 关于各种Vue UI框架中加载进度条的正确使用

    这里拿MUSE UI 中的进度条举例 <mu-circular-progress :size="40" class="icon" v-if="i ...

  7. element admin中使用nprogress实现页面加载进度条

    主要是知道是nprogress这个组件实现的就可以了,组件的使用方法可参考:https://blog.csdn.net/ltr15036900300/article/details/47321217 ...

  8. 插件二之页面加载进度条pace.js

    关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...

  9. 自己写的页面加载进度条jquery插件

    (function ($) { var progressId = "progress" + Math.round(Math.random() * 100) var progress ...

随机推荐

  1. CodeForces 690C1 Brain Network (easy) (水题,判断树)

    题意:给定 n 条边,判断是不是树. 析:水题,判断是不是树,首先是有没有环,这个可以用并查集来判断,然后就是边数等于顶点数减1. 代码如下: #include <bits/stdc++.h&g ...

  2. JAVA 异常分类与理解

    摘自CSDN:::::http://blog.csdn.net/hguisu/article/details/6155636 1. 引子 try…catch…finally恐怕是大家再熟悉不过的语句了 ...

  3. 机器学习及其matlab实现—从基础到实践

    第1周 MATLAB入门基础 第2周 MATLAB进阶与提高 第3周 BP神经网络 第4周 RBF.GRNN和PNN神经网络 第5周 竞争神经网络与SOM神经网络 第6周 支持向量机(Support ...

  4. 多线程的那点儿事(之windows锁)

    在windows系统中,系统本身为我们提供了很多锁.通过这些锁的使用,一方面可以加强我们对锁的认识,另外一方面可以提高代码的性能和健壮性.常用的锁以下四种:临界区,互斥量,信号量,event. (1) ...

  5. Quartus中代码字体大小的调整方法

    Quartus中代码大小的调整方法 网友 "一纸玫瑰"整理 第一步:点击Tools(工具) 第二步:点击Options(选项) 第三步:Text Editor(文本编辑)/Font ...

  6. 【Linux】GDB调试工具

    GDB调试工具 Linux中包含一个很强大的调试工具GDB(GNU Debuger),可以用它来调试C和C++程序. 一. GDB的主要功能有: 设置断点,当程序运行到断点处暂停 显示变量的值,可以打 ...

  7. 学习python5面向

    类有一个名为 __init__() 的特殊方法(构造方法),该方法在类实例化时会自动调用 面向过程:根据业务逻辑从上到下写代码 面向对象:将数据与函数绑定到一起,进行封装,这样能够更快速的开发程序,减 ...

  8. web_custom_request函数详解【摘抄】

    本次摘抄自:http://www.cnblogs.com/yezhaohui/p/3280239.html web_custom_request()函数是一个可以用于自定义http请求的“万能”函数, ...

  9. Linq转换操作之ToArray,ToList,ToDictionary源码分析

    Linq转换操作之ToArray,ToList,ToDictionary源码分析 一:linq中的转换运算符 1. ToArray 我们经常用在linq查询上吧. linq只能运用在IEnumerab ...

  10. CentOS下Docker与.netcore(二) 之 Dockerfile

    CentOS下Docker与.netcore(一) 之 安装 CentOS下Docker与.netcore(二) 之 Dockerfile CentOS下Docker与.netcore(三)之 三剑客 ...