vue-router切换时loading效果实现

实现原理

1. 可以在vuex中维护一个isLoading 的变量

2. 在 router.beforeEach 钩子中 设置 isLoading = true , 在 router.afterEach 中 设置 isLoading = false

Vuex：

actions.js：

export default {
  onLoading(context, isLoading) {
    context.commit('setLoading', isLoading);
  }
};

mutations.js：

export default {
  setUser(state, user) {
    state.user = user;
  },
  setUserPlaylist(state, playlist) {
    state.userPlaylist = playlist;
  },
  setCount(state, count) {
    state.count = count;
  },
  setLoading(state, isLoading) { console.log(isLoading); state.isLoading = isLoading; }
};

state.js：

export default {
  user: null,
  userPlaylist: [],
  count: 0,
  isLoading: null
};

在main.js中：

router.beforeEach((to, from, next) => {
  store.dispatch('onLoading', true);
  console.log(store.state.isLoading);
  next();
});
// 这里为了让效果明显一些加了延时
router.afterEach((to, from) => {
  setTimeout(function() {
    store.dispatch('onLoading', false);
    console.log(store.state.isLoading);
  }, 1000);
});

3. 在根组件（即所在的父组件）上 放置一个Loading组件，例如：

 

 

computed: {
    ...mapState(['count', 'isLoading']),
    keyword() {
      return this.$route.params.keywords;
    }
  },

完成