vue使用nprogress页面加载进度条

NProgress是页面跳转是出现在浏览器顶部的进度条

官网:http://ricostacruz.com/nprogress/

github:https://github.com/rstacruz/nprogress

下载 nprogress

  1. npm install --save nprogress

入口文件,main.js引入 nprogress

  1. import App from './App'
  2. import VueRouter from 'vue-router'
  3. import router from './router' //你的路由文件
  4. //引入nprogress
  5. import NProgress from 'nprogress' // 进度条
  6. import 'nprogress/nprogress.css' //这个样式必须引入
  7. Vue.use(VueRouter)
  8. // 简单配置
  9. NProgress.inc(0.2)
  10. NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })
  11. router.beforeEach((to,from,next) => {
  12. NProgress.start()
  13. next()
  14. })
  15. router.afterEach(() => {
  16. NProgress.done()
  17. })
  18. new Vue({
  19. el: '#app',
  20. router,
  21. render: h => h(App)
  22. })

1.引入依赖:

  1. import NProgress from 'nprogress'
  2. import 'nprogress/nprogress.css'

简单的调用 start() 和 done() 方法来控制进度条。

  1. NProgress.start(); //开始
  2. NProgress.done(); // 结束

2.如果想ajax请求有progress,加载vue-resource的interceptors中:

  1. Vue.http.interceptors.push((request, next) => {
  2. NProgress.start();
  3. next((response)=>{
  4. NProgress.done();
  5. });
  6. });

3.如果想路由跳转有progress,加在vue-router的beforeEach和afterEach中:

  1. router.beforeEach(transition => {
  2. NProgress.done();
  3. });
  4. router.afterEach(transition => {
  5. NProgress.start();
  6. });

PS: 我这里有些奇葩的是beforeEach在afterEach之后执行。。。。所以我只能在afterEach中start了。。

修改进度条颜色

1、在App.vue中的style中增加:

  1. #nprogress .bar {
  2. background: red !important; //自定义颜色
  3. }

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. Swig在Mac OS X上的安装

    网上有很多类似文章介绍Swig怎么在Mac OS X上安装和配置,一般来说就是: 下载pcre,configure & make & make install 下载swig,confi ...

  2. PowerDesigner连接MySQL

    1.使用JDBC连接,地址:http://dev.mysql.com/downloads/connector/j/ 2.需安装Java(应该只要JRE):http://www.oracle.com/t ...

  3. CentOS下安装PHP的AMQP扩展方法和步骤

    AMQP,即Advanced Message Queuing Protocol,一个提供统一消息服务的应用层标准高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计.基于此协议的客户端 ...

  4. win7 64位备份时, 无法启动服务,0x80070422

    问题:当win7 64位系统在备份的时候,无法启动备份服务,错误代码:0x80070422 解决方法:计算机->管理->服务 找到 Block Level Backup Engine Se ...

  5. Android-ListView-SimpleCursorAdapter

    在上篇博客,Android-ListView-SimpleAdapter,中介绍了SimpleAdapter的使用操作(SimpleAdapter面向的数据是非Cursor数据),而SimpleCur ...

  6. IE8下window.open 二次无法加载页面

    我原先的IE是系统默认自带的IE7,升级到IE8之后,就出现了此现象: 打开一个窗口(window.open方式)后,再打开时,新窗口的页面显示空白,无法加载其内容.关闭ie后,重新偿亦是如此,第一次 ...

  7. Replication--使用MSlogreader_history查看日志读起的延迟和事务命令

    --======================================================================== MSlogreader_history 表存放本地 ...

  8. 把windows电脑变成路由器使用

    实用小技巧1 把windows电脑变成路由器使用 适用对象: windows7.windows8的笔记本电脑或者有无线网卡的台式电脑 网络要求: CMCC-EDU和家里拨号上网的都可以,但是电信的校园 ...

  9. leetcode 从排序数组中删除重复项

    最近的学习是相当的无聊,并且很无趣,每天都浪费了很多时间,比如今天下午,就是搞一手成语接龙,我也是醉了- 并且我也不知道学什么了,所以决定刷题 虽然我是0算法基础,0逻辑能力的渣渣,但是尽力每天做一道 ...

  10. 使用javascript随机生成斗地主玩家手牌

    学习javascript估摸着有半个多月了,好歹自己有过编程基础,学的还算轻松,不过js里的面向对象是真的打脑壳,但都但不懂,和我以前学过的c#简直相差太远 今天写了个随机生成斗地主玩家手牌的代码,自 ...