以下方法需要引入vuex,另使用了vux的UI框架,ajax添加loading还引入了axios。

一、为页面切换添加loading。

  loading.js:

import Vue from 'vue'
import Vuex from 'vuex'
import router from './router' Vue.use(Vuex) const store = new Vuex.Store({}) // 这里你可能已经有其他 module store.registerModule('myVux', { // 名字自己定义
state: {
isLoading: false
},
mutations: {
updateLoadingStatus (state, payload) {
state.isLoading = payload.isLoading
}
}
})
router.beforeEach(function (to, from, next) {
store.commit('updateLoadingStatus', {isLoading: true})
next()
}) router.afterEach(function (to) {
store.commit('updateLoadingStatus', {isLoading: false})
}) export default store;

  main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'
import store from './loading' Vue.use(Vuex)
Vue.use(router) new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App
}
})

  App.vue:

//在模板中加入以下vux组件
<loading :text="loadText" v-model="isLoading"></loading> import { Loading } from 'vux'
import { mapState } from 'vuex' export default {
name: 'app',
data(){
return {
loadText:"loading"
}
},
components: {
Loading
},
computed:{
...mapState({
isLoading: state => state.myVux.isLoading
})
}
}

二、为ajax添加loading(发送请求时显示,返回数据时消失)。

  loading.js:

import Vue from 'vue'
import Vuex from 'vuex' import Axios from 'axios'
 Vue.use(Vuex)
Axios.interceptors.request.use(config => {
console.log('ajax begin request')
store.commit('ajaxStar')
return config;
}) Axios.interceptors.response.use(config => {
console.log('ajax get response')
store.commit('ajaxEnd')
return config
})
store.registerModule('myVux', { // 名字自己定义
state: {
ajaxIsLoading: false
},
mutations: {
ajaxStar (state) {
state.ajaxIsLoading = true
},
ajaxEnd (state) {
state.ajaxIsLoading = false
}
},
getter : {
ajaxIsLoading: state => state.ajaxIsLoading
}
})
export default store;

  main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'
import store from './loading' Vue.use(Vuex)
Vue.use(router) new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App
}
})

  App.vue:

//在模板中加入以下vux组件
<loading :text="loadText" v-model="ajaxIsLoading"></loading> import { Loading } from 'vux'
import { mapState } from 'vuex' export default {
name: 'app',
data(){
return {
loadText:"loading"
}
},
components: {
Loading
},
computed:{
...mapState({
    ajaxIsLoading: state => state.myVux.ajaxIsLoading

}) } }

Vue通过状态为页面切换添加loading、为ajax加载添加loading的更多相关文章

  1. ajax加载菊花loading效果

    Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...

  2. Entity Framework加载相关实体——延迟加载Lazy Loading、贪婪加载Eager Loading、显示加载Explicit Loading

    Entity Framework提供了三种加载相关实体的方法:Lazy Loading,Eager Loading和Explicit Loading.首先我们先来看一下MSDN对三种加载实体方法的定义 ...

  3. JQuery+CSS3实现Ajax加载时loading效果

    之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...

  4. fakeLoader页面加载前loading演示8种效果

    提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...

  5. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  6. 页面加载时loading效果

    页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. HTML页面处理以及资源文件的加载

    Javascript 异步加载详解 这篇文章很详细的介绍了HTML的页面处理以及资源文件的加载. 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading ...

  8. 《动手实现一个网页加载进度loading》

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

  9. jquery mobile 的loading提示“正在加载...”在不同版本中的不同实现方式

    在jquery mobile开发中,在页面的切换.或者ajax获取数据时由于网速慢等其他原因,会有一个加载的时间,如果能在这段时间给一个“正在加载...”的提示,用户体验会更好.下面来简单的介绍一下在 ...

随机推荐

  1. Servlet编程实例 续4

    ---------------siwuxie095 JSP+Servlet+JDBC 继续完善登录实例,将校验逻辑改为:从数据库中获取用户信息进行校验 数据库准备 在 Navicat for MySQ ...

  2. docker启动

    启动容器 启动容器有两种方式,一种是基于镜像新建一个容器并启动,另外一个是将在终止状态(stopped)的容器重新启动. 因为 Docker 的容器实在太轻量级了,很多时候用户都是随时删除和新创建容器 ...

  3. DBVisualizer Pro for mac

    公司使用的是DB2数据库,支持DB2的数据库客户端常用的有DBeaver和DBVisualizer.DBeaver是免费的,但本人电脑安装后,启动一直报错,问题一直没解决就放弃了.改用DBVisual ...

  4. VS编译器中设置 输出窗口 只显示error,不显示warning 要如何配置

    VS编译器中设置 输出窗口 只显示error,不显示warning 要如何配置 在编译大型项目的时候,总是VS编译器的输出窗口总是会出现一堆warning警告,要想在里面找到error错误,要使用鼠标 ...

  5. R: 关于 table 函数的应用

    ################################################### 问题:关于 table 函数   18.5.9 来一个关于 table 函数的例子,说明tabl ...

  6. 15、TSA数据上传(https://www.ncbi.nlm.nih.gov/genbank/tsaguide/#SP)

    https://www.ncbi.nlm.nih.gov/genbank/tsa/ https://www.ncbi.nlm.nih.gov/genbank/tsaguide              ...

  7. java String编码转换

    /** * Get XML String of utf-8 * * @return XML-Formed string */ public static String getUTF8XMLString ...

  8. Vue.js 源码实现

    目录 Vue.js 代码实现 1. 步骤一 2. 步骤二 3.步骤三 Vue.js 工作机制 初始化 编译 响应式 虚拟dom 更新视图 编译 Vue.js 代码实现 检验学习效果的最好方法就是自己造 ...

  9. HyperLedger Explore 浏览器配置启动教程

    Hyperledger Fabric维护的实际上是一个区块链网络.为了能够直观的观察网络上的节点,交易等行为,Hyperledger Explore随之诞生. 本文讲述如何搭建 Hyperledger ...

  10. 一起来造一个RxJava,揭秘RxJava的实现原理

    一类创业者基本都是做传统行业的,这类创业者非常大胆,也非常舍得投入.很多时候他们如果看到或者想到一个商机,就会投入成千上百万,先把产品做出来,然后再去想怎么开拓市场. 这类传统行业的老板,问我最多的问 ...