页面切换显示loading

移动端如果使用异步组件加载那么还是需要一点等待时间的，在网络慢时等待时间会更长。显示Loading状态缓解一下用户等待情绪就十分重要。

如果你使用vue-router和vuex，那么可以很容易实现。

首先，注册一个module来保存状态

  1. const store = new Vuex.Store({}) // 这里你可能已经有其他 module
  3. store.registerModule('vux', { // 名字自己定义
  4.   state: {
  5.     isLoading: false
  6.   },
  7.   mutations: {
  8.     updateLoadingStatus (state, payload) {
  9.       state.isLoading = payload.isLoading
  10.     }
  11.   }
  12. })

然后使用vue-router的beforeEach和afterEach来更改loading状态

  1. router.beforeEach(function (to, from, next) {
  2.   store.commit('updateLoadingStatus', {isLoading: true})
  3.   next()
  4. })
  6. router.afterEach(function (to) {
  7.   store.commit('updateLoadingStatus', {isLoading: false})
  8. })

在App.vue里使用loading组件并从vuex获取isLoading状态

  1. <loading v-model="isLoading"></loading>
  1. import { Loading } from 'vux'
  2. import { mapState } from 'vuex'
  4. export default {
  5.   components: {
  6.     Loading
  7.   },
  8.   computed: {
  9.     ...mapState({
  10.       isLoading: state => state.vux.isLoading
  11.     })
  12.   }
  13. }

done.

如果你觉得在加载比较快时Loading组件一闪而过体验也不大好，那么你可以延迟设置loading=false。