How I can force Vue Router to reload my page when I'm trying to navigate in the current location?

Question

Actually I have my project like this.

• Views
  • Home.vue
  • Classroom.vue
• App.vue

In the Home.vue I have my the content and the login form. Basically, if you are not connected yet you have the submit the login (if the login is correct then isAuth = true) and the form hide and you can now see the content (list of classrooms)

<div v-if="isAuth" @click="goToClassroomView"> List of classrooms </div>
<div v-if="!isAuth"> Here is the login form... </div>

In my App.vue, I have an app-bar and main with a router-view with my logout function.

<v-app-bar app color="#2196f3">
    <v-btn @click="logout()">logout</logout>
</v-app-bar>

<v-main class="white">
      <router-view></router-view> //Either Home.vue or Classroom.vue
</v-main>

Here is my logout function inside the App.vue :

 logout() {
        this.$store.dispatch('LOGOUT')
        .then(() => {
          this.$router.push('/') //go to home.vue
        })
      }

So here comes my problem. When I click on the logout button when i'm in the home.app, the user logout correctly but my page is now a empty list of classrooms (because there's no user and isAuth is a variable inside the Home.vue so I can't affect it from the App.vue).

So is it possible to reload the page when I'm in the Home page or access to isAuth from the App.vue, so when an user logout in the home page, the list of classroom disappear and it shows the form ?

Answer 1

You can change isAuth variable to vuex store state. Then in LOGOUT action you change isAuth state to false.