Question

我有一个使用vue-router的Vue.js SPA。因为登录后每个页面都需要保持状态（如输入过滤器/分页），这是使用keep-alive完成的：

<keep-alive>
  <router-view/>
</keep-alive>

这很好用，但是当有人注销并再次登录时，由于保持活动状态，我仍然看到相同的过滤器值。

我可以在注销时以某种方式刷新/清除以编程方式保留的页面吗？

Answer 1

我认为没有一种简单的方法（以编程方式）来完成，所以您剩下两个选择。

选项1 将重置状态，这意味着您在内部跟踪初始状态并收听诸如注销时发出的东西以重置状态。组件恢复到初始状态。

选项2 将使用以下方法简单地替换keep-alive组件：

<keep-alive v-if="loggedIn">
    <router-view></router-view>
</keep-alive>

<router-view v-else></router-view>

Answer 2

使用Vue全局事件的一种方式。

Vue.prototype.$loginState = new Vue();

在您的组件中，单击“注销”按钮触发事件。

function logout(){
    //your codes here to logout and then
    this.$loginState.$emit('logout');
}

在用户登录时看到的组件中，只需侦听事件触发的“注销”即可将所有变量设置为其默认值。

<button @click="resetValues"> Logout </button>
methods: {
    resetValues(){
        this.yourValue = '';
        this.filters = [];
    }
}
created(){
    this.$loginState.$on('logout', this.resetValues)
}

Answer 3

保持活动状态的组件位于this.$children内部，因此您可以遍历这些组件并修改状态。

刷新vue.js保持活动部分中的页面

3 个答案: