以下方法需要引入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})
})
exportdefault store;
main.js
import Vue from 'vue'impo