vue-resulting 구성 요소를 라우터 보기 외부로 업데이트하지 않음

vue-resulting 구성 요소를 라우터 보기 외부로 업데이트하지 않음

다음과 같은 루트 Vue 구성 요소 설정:

<div>
    <main-nav></main-nav>
    <router-view></router-view>
</div>

따라서 메인 내브는 라우터 뷰 외부의 구성요소다.데이터가 변경되거나 경로에서 경로로 이동할 때 메인 내브 자체를 제대로 업데이트하는 데 어려움을 겪고 있다.기본 네이브의 간단한 버전은 다음과 같다.

<template>
  <li v-show="loggedIn">
    <a @click="logout">Logout</a>
  </li>
</template>

<script>
  import { isLoggedIn, logout } from '@/tools/Auth'

  export default {
    computed: {
      loggedIn: {
        cache: false,
        get() {
          return isLoggedIn()
        }
      }
    },

    methods: {
      logout() {
        logout().then(() => {
          this.$router.push({ name: 'Login' })
          // this is necessary or the nav isn't updated after logout
          this.$forceUpdate()
        })
      }
    }
  }
</script>

먼저 나는 설정해야만 했다.cache: false에서loggedIn로그아웃한 후에도 자산이 전혀 업데이트되지 않는 경우.나는 또한 a를 추가해야 했다.$forceUpdate()로그아웃 후 구성 요소가 새로 고쳐지도록 하십시오.지금 로그인한 후에도 같은 문제가 있어. 구성 요소가 새로 고쳐지지 않아.나는 Vue dev 도구에서 다음과 같은 것을 볼 수 있다.loggedIn이다true페이지를 새로 고칠 때까지 로그아웃 링크가 표시되지 않음.

경주 조건이 아니라 현재 비동기적인 것은 아무것도 없다.난 지금 쿠키를 설정하고 삭제하는 중이야.

내가 왜 이런 문제를 겪고 있는지 아는 사람?나는 다른 프로젝트에서 온 부에로터에 대해 꽤 잘 알고 있고 설명서를 읽었는데 내가 뭔가 놓친 게 있나?

참조URL: https://stackoverflow.com/questions/43586665/vue-router-not-updating-component-outside-of-router-view