如何在方法中销毁 VueJS 组件？答案

【问题标题】：How to destroy VueJS component in a method?如何在方法中销毁 VueJS 组件？
【发布时间】：2019-03-04 21:17:24
【问题描述】：

我有一个带有选项卡组件的 VueJS 应用程序，用户可以在其中打开不同的选项卡。我还支持用户帐户，因此每个用户都可以拥有自己的标签。

但这里有一个问题：如果我使用一个用户登录，那么我会退出，然后我会使用不同的用户登录。在第二个用户登录后的一秒（或两秒）内，我可以看到前一个用户拥有的选项卡，并立即被第二个用户的选项卡覆盖。

那么我该如何防止这种情况发生呢？我认为这可以通过单击“注销”按钮时的方法来完成。

更准确地说，我拥有的是一个路由器和两个页面（LoginPage 和 MainPage），在注销后，我将使用路由器重定向到 LoginPage。

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'MainPage',
      component: MainPage
    },
    {
      path: '/login',
      name: 'LoginPage',
      component: LoginPage,
    }
  ]
}

MainPage 中的数据来自它的 create() 和 mount() 事件，我认为通过强制重新创建组件将解决我的问题。由于这不是我想从一个用户保存到另一个用户的内容，因此它应该具有我第一次访问时加载的效果。

【问题讨论】：

您可以在处理注销方法时使用 vuex 操作来删除属于该用户的所有链接变量。

标签： vue.js vuejs2 vue-component vuex vue-router

【解决方案1】：

尝试为与用户 ID 相关联的 MainPage 组件分配一个唯一键，以强制它在用户更改时重新呈现。有点像..

<main-page :key="user.id" ...>

【讨论】：