当我尝试在当前位置导航时，如何强制 Vue Router 重新加载我的页面？

Question

其实我的项目是这样的。

• 查看次数
  • Home.vue
  • Classroom.vue
• App.vue

在Home.vue 我有我的内容和登录表单。基本上，如果你还没有连接，你有提交登录（如果登录正确，那么isAuth = true）和表单隐藏，你现在可以看到内容（教室列表）

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

在我的 App.vue 中，我有一个 app-bar 和 main 以及一个带有我的注销功能的路由器视图。

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

这是我在 App.vue 中的注销功能：

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

所以我的问题来了。当我在 home.app 中单击注销按钮时，用户正确注销，但我的页面现在是一个空的教室列表（因为没有用户并且isAuth 是Home.vue 中的一个变量，所以我不能从App.vue 影响它。

所以当我在主页时是否可以重新加载页面或从App.vue访问isAuth，所以当用户在主页注销时，教室列表消失并显示形式？

Answer 1

您可以将isAuth 变量更改为 vuex 存储状态。 然后在LOGOUT 操作中将isAuth 状态更改为false。