어떤 방법으로 VueJS 구성 요소를 파괴하는 방법?

어떤 방법으로 VueJS 구성 요소를 파괴하는 방법?

나는 사용자가 다른 탭을 열 수 있는 탭 구성요소가 있는 VueJS 애플리케이션을 가지고 있다.또한 나는 사용자 계정을 지원해서 각 사용자들이 자신만의 탭을 가질 수 있도록 한다.

하지만 여기서 중요한 점은 한 명의 사용자로 로그인하면 로그아웃하고 그 직후 다른 사용자로 로그인한다는 겁니다.두 번째 사용자가 기록된 후 두 번째(또는 두 번째) 동안 이전 사용자가 가지고 있는 탭을 볼 수 있으며, 즉시 두 번째 사용자의 탭으로 덮어쓸 수 있다.

그럼 어떻게 하면 이런 일이 일어나지 않게 할 수 있을까?나는 "로그아웃" 버튼을 클릭했을 때 어떤 방법으로 이 작업을 할 수 있다고 생각한다.

좀 더 정확히 말하면, 내가 가지고 있는 것은 라우터와 두 페이지(두 페이지)이다.LoginPage그리고MainPage) 및 로그아웃 시 라우터를 사용하여LoginPage.

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

데이터:MainPage생성() 및 마운트() 이벤트에서 발생하며, 구성 요소를 다시 재생성하도록 강제하면 문제가 해결될 것으로 가정한다.이것은 사용자에서 사용자로 저장하고자 하는 것이 아니기 때문에, 대신 처음 방문했을 때처럼 로딩 효과가 있어야 한다.

고유한 키를 할당해 보십시오.MainPage사용자가 변경될 때 강제로 다시 설정하도록 사용자 ID에 연결된 구성 요소.뭐랄까..

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

참조URL: https://stackoverflow.com/questions/52562713/how-to-destroy-vuejs-component-in-a-method