CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuexvue-router
delux
delux

Reputation: 1886

How to destroy VueJS component in a method?

I am having a VueJS application with a Tabs component, where user can open different tabs. Also I’m supporting user accounts, so each user can have his own tabs.

But here is the catch: if I’m logged with one user, then I’m logging out and right after that I’m logging in with different user. For a second (or two) after the second user is logged, I’m then able to see the tabs which the previous user has and immediately they are overwritten with the tabs for the second user.

So how I’m able to prevent this to happen? I assume this can be done on in a method when the “log out” button is clicked.

To be more precise, what I’m having is a router and two pages (LoginPage and MainPage) and with logging out I’m redirected with the router to the LoginPage.

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

Data in the MainPage comes on it’s create() and mounted() events and I assume that by forcing components to be recreated again will resolve my issue. Since this is not something that I want to save from user to user, instead it should have the effect of loading as when I’m visiting for the first time.

Upvotes: 1

Views: 2143

Answers (1)

Husam Elbashir
Husam Elbashir

Reputation: 7177

Try assigning a unique key to your MainPage component that's tied to your user's id to force it to re-render when the user changes. Something like ..

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

Upvotes: 1

Related Questions