Question

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

但是这里有个要点：如果我是用一个用户登录的，那么我要注销，此后立即用另一个用户登录。在第二个用户登录后的一两个（或两个）内，我可以看到先前用户拥有的选项卡，并立即用第二个用户的选项卡覆盖它们。

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

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

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

MainPage中的数据来自其create（）和Mounted（）事件，我认为通过强制重新创建组件可以解决我的问题。由于这不是我要在用户之间保存的内容，因此应该具有加载的效果，就像我第一次访问时一样。

Answer 1

尝试为与您的用户ID绑定的MainPage组件分配唯一键，以在用户更改时强制其重新呈现。像..

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

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

1 个答案: