Question

我的root Vue组件设置如下：

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

因此，main-nav是路由器视图之外的组件。当数据发生变化或从路线导航到路线时，我在主导航更新时遇到了麻烦。这是main-nav的简化版本：

<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，否则在注销后根本不会更新。我还必须在注销后添加$forceUpdate()，以便组件自行刷新。现在我在登录后遇到了同样的问题 - 该组件只是不刷新。我可以在vue dev工具中看到loggedIn是true，但在刷新页面之前它不会显示注销链接。

这不是竞争条件，目前没有任何异步。我现在只是设置并删除一个cookie以使其正常工作。

任何人都知道我为什么会遇到这些问题？我对其他项目的vue-router非常熟悉，我已经阅读了文档，但也许我错过了什么？

vue-router不更新router-view

0 个答案: