vue项目加全局loading_iview 添加全局loading

<div v-show="!isLoading">
  <router-view #="{ Component, route }">
    <keep-alive>
      <component :is="Component" :key="route.name" v-if="route.meta.keepAlive" />
    </keep-alive>
    <component :is="Component" :key="route.name" v-if="!route.meta.keepAlive" />
  </router-view>
</div>
<div v-show="isLoading">
  <van-loading type="spinner" size="64"  color="#1989fa" />
</div>

this.$router.beforeEach((to, from, next) => {
  this.isLoading = true;
  next();
});
this.$router.afterEach((to, from, failure) => {
  this.isLoading = false;
});

.van-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27