移动端如果使用异步组件加载那么还是需要一点等待时间的，在网络慢时等待时间会更长。显示Loading状态缓解一下用户等待情绪就十分重要。
如果你使用vue-router和vuex，那么可以很容易实现。
首先，注册一个module来保存状态
const store = new Vuex.Store({}) // 这里你可能已经有其他 module\n\nstore.registerModule('vux', { // 名字自己定义\n state: {\n isLoading: false\n },\n mutations: {\n updateLoadingStatus (state, payload) {\n state.isLoading = payload.isLoading\n }\n }\n})\n然后使用vue-router的beforeEach和afterEach来更改loading状态
router.beforeEach(function (to, from, next) {\n store.commit('updateLoadingStatus', {isLoading: true})\n next()\n})\n\nrouter.afterEach(function (to) {\n store.commit('updateLoadingStatus', {isLoading: false})\n})\n在App.vue里使用loading组件并从vuex获取isLoading状态
<loading v-model=\"isLoading\"></loading>\nimport { Loading } from 'vux'\nimport { mapState } from 'vuex'\n\nexport default {\n components: {\n Loading\n },\n computed: {\n ...mapState({\n isLoading: state => state.vux.isLoading\n })\n }\n}\ndone.
\n如果你觉得在加载比较快时Loading组件一闪而过体验也不大好，那么你可以延迟设置loading=false。