以下方法需要引入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. 《精通Spring4.X企业应用开发实战》读后感第六章(容器事件)

  2. JSK 糟糕的bug

    传送门 题目居然复制不了(QAQ) 分析 TrieJSK已经2比较详细了,就不再单独写博客了,此题相较于Trie模板有一点不同,此题要求比较前缀却没有规定前面是后面的前缀还是后面是前面的前缀,所以我们 ...

  3. CSS学习系列2 -- CSS中的清除浮动

    CSS中有一个很常见的问题,就是元素的浮动. 那么,到底什么是元素的浮动呢,我们来看一个例子 举个例子,在一个div里面内部有浮动元素的话,这个浮动元素会让这个div的高度塌陷. .myDiv{ ba ...

  4. C++内存管理之unique_ptr

    一个unique_ptr"拥有“他所指向的对象.与shared_ptr不同,某个时刻只能有一个unique_ptr指向一个给定的对象.当unique_ptr被销毁时,它所指向的对象也被销毁. ...

  5. 新一代web框架Koa源码学习

    此文已由作者张佃鹏授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Koa 就是一种简单好用的 Web 框架.它的特点是优雅.简洁.表达力强.自由度高.本身代码只有1000多行 ...

  6. python语言基础语法笔记<note1库安装和工具安装>

    Python是一门入门简单的编程语言,它的安装和搭建也非常简单.在大部分的发行Linux版本上都预装了python2,部分也预装了python3,需要查看Linux上是否安装Python,只需要在 命 ...

  7. 清北刷题冲刺 11-01 p.m

    轮换 #include<iostream> #include<cstdio> #include<cstring> #define maxn 1010 using n ...

  8. linux中使用wget模拟爬虫抓取网页

    如何在linux上或者是mac上简单使用爬虫或者是网页下载工具呢,常规的我们肯定是要去下载一个软件下来使用啦,可怜的这两个系统总是找不到相应的工具,这时wget出来帮助你啦!!!wget本身是拿来下载 ...

  9. 洛谷 P1536 村村通(并查集)

    嗯... 题目链接:https://www.luogu.org/problemnew/show/P1536 思路: 这道题可以看出是并查集的思想,然后用一个while嵌套一下,输入一条路的两个端点,就 ...

  10. Exadata Adaptive Scrubbing Schedule

    1.为什么要引入"Hard Disk Scrub and Repair"特性 在exadata的11.2.3.3.0版本中,开始引进了"Automatic Hard Di ...