CODEWITHSUNDEEP
vue.jsvue-router
Christian
Christian

Reputation: 25

Show component during route changes

Is there a way that I can show a component during the change of a route?

When the user opens the page the beforeEach() method checks if the user is already authenticated. This process might take a few moments. During this time the screen is blank.

Is there a way to render a component while the beforeEach()method is doing it's thing?

Or is there a way to tell the component holding the router-view to show something while the beforeEach() method is running?

My App.vue looks like this:

<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

Upvotes: 0

Views: 46

Answers (1)

AlekseyHoffman
AlekseyHoffman

Reputation: 2694

You could try something like this:

App.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;
}

Other router-view components:

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)
    } 
  }
}

Upvotes: 1

Related Questions