Показать компонент во время изменения маршрута

Question

Можно ли как-то показать компонент во время изменения маршрута?

Когда пользователь открывает страницу, метод beforeEach() проверяет, прошел ли он проверку подлинности пользователя. Этот процесс может занять несколько минут. В это время на экране ничего не отображается.

Есть ли способ визуализации компонента, пока метод beforeEach() делает свое дело?

Или есть способ сообщить компоненту, удерживающему router-view чтобы показать что-то во время работы метода beforeEach()?

My Приложение. 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)
    } 
  }
}