当我试图在当前位置导航时，如何强制 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

）影响它。

所以当我在主页或从

isAuth

访问

App.vue

时是否可以重新加载页面，所以当用户在主页注销时，教室列表消失并显示表格？

Answer 1

您可以将

isAuth

变量更改为 vuex 存储状态。 然后在

LOGOUT

动作中，您将

isAuth

状态更改为

false

.