vue路由切换loading_vue使用vux页面切换loading

1 main.js里面添加内容.....

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({})

store.registerModule('vux', { // 名字自己定义

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) {

setTimeout(() => {

store.commit('updateLoadingStatus', {isLoading: false})

}, 300)

})

.....

new Vue({

store,

router,

render: h => h(App)

}).$mount('#app')

2 App.vue中添加内容

........

import { Loading } from 'vux'

import { mapState } from 'vuex'

export default {

components: {

Loading,

},

computed: {

...mapState({

isLoading: state => state.vux.isLoading

})

}

}