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. 为啥final类型的map或者arraylist可以修改数据 而final类型的String变量不可以修改数据呢

    比如 final   Map  map =new  HashMap();    可以往map里put数据final   List  list =new  ArrayList();   可以往list里 ...

  2. NBA常识 位置的划分 足球:越位等于抢跑

    篮球:1号位——组织后卫(控球,组织)2号位——得分后卫(中远投篮,突破)3号位-----小前锋(突破,中远投篮)4号位——大前锋(二中锋,篮板,背身单打,禁区防守)5号位——中锋(篮板.背身单打,禁 ...

  3. CodeForces 347B Fixed Points (水题)

    题意:给定 n 数,让你交换最多1次,求满足 ai = i的元素个数. 析:很简单么,只要暴力一遍就OK了,先把符合的扫出来,然后再想,最多只能交换一次,也就是说最多也就是加两个,然后一个的判,注意数 ...

  4. PHP 5.2 5.3 5.4 5.5 memcache dll扩展

    在windows下PHP5.2版本的memcache扩展dll文件好找,5.3的可能不是很好找,这里提供PHP5.2.5.3.5.4.5.5的php_memcache.dll扩展,需要的可以下载. 全 ...

  5. 练习题。对DOM中document的深刻理解巩固

    //window.onload = modTwo;     1.点击单元格内容  弹窗promrt接收值   将接受的值提换单元格内容    2.点击单元格  出现2个按钮 加粗 字体颜色标红     ...

  6. Django进阶(转载)

    Django进阶地址 来自为知笔记(Wiz)

  7. 解决word2013老是打开未响应情况

    问题:自己装了word2013时,每次打开word或者工作时,老是出现一个圈圈,提示未反应,是否关闭程序这样的提示: 解决方法:文件->选项->高级->显示->禁用硬件加速,将 ...

  8. sudo -s/sodo -i/su root

    sudo : 暂时切换到超级用户模式以执行超级用户权限,提示输入密码时该密码为当前用户的密码,而不是超级账户的密码.不过有时间限制,Ubuntu默认为一次时长15分钟.su : 切换到某某用户模式,提 ...

  9. redis----内部数据结构学习

    整数集合 1.应用 用于有序.无重复的保存多个整数值 自动选择该用什么长度的整数类型保存数据

  10. Partition--分区切换2

    有分区表TB2和TB2_History CREATE TABLE TB2( ID  BIGINT IDENTITY(1,1) PRIMARY KEY, C1 NVARCHAR(200))ON[ps_T ...