在管线更改期间显示零部件

Question

有没有一种方法可以在更改路线时显示组件？

当用户打开页面时，beforeEach()方法检查用户是否已通过身份验证。这个过程可能需要一些时间。在此期间，屏幕为空白。

有没有一种方法可以在beforeEach()方法执行其任务时渲染组件？

或者有没有一种方法可以告诉持有router-view的组件在beforeEach()方法运行时显示一些东西？

我的应用程序.vue看起来像这样：

<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {};
</script>
<style scoped>
#app {
/* Ensure the app always takes 100% off the available space */
height: 100%;
}
</style

Answer 1

你可以试试这样的东西：

应用.vue：

<div id="app">
<loader-component
v-if="isLoading" 
class="loader-component"
/>
<router-view />
</div>

.loader-component {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}

其他router-view组件：

beforeRouteLeave (to, from, next) {
this.isLoading = true
},
mounted () {
this.isLoading = false
},
computed: {
isLoading: {
get () {
return this.$store.state.isLoading 
},
set (value) {
this.$store.commit('update_property_isLoading', value)
} 
}
}