Javascript Vue.js:尽管有条件渲染，元素仍会显示一会儿

我有一个导航按钮，可以切换菜单和登录按钮

当用户未经授权时，他只能看到“登录”按钮。当用户登录时，该按钮消失，他/她可以看到一个汉堡包按钮，用于切换用户的菜单

我有一个基于属性

isLoaded

的条件，根据API响应，该条件可能为假或真（在登录后是否加载了配置文件数据）。它工作正常，但当我重新加载页面并在登录过程后重定向到主页时，“登录”按钮会出现一段时间。我不知道怎样才能避免这种情况

我怀疑此按钮是在应用程序等待API响应时显示的，当它看到

isLoaded:true

时，它会在检查条件后隐藏该按钮

这是我的密码：

<v-toolbar app fixed dark color="light-blue lighten-2">
  <user-nav-button v-if="getProfile.isLoaded"
                   @toggle-drawer="$refs.drawer.drawer = !$refs.drawer.drawer" />
  <v-toolbar-title v-if="getProfile.isLoaded">
    <router-link :to="{ name: '/' }"
                 class="white--text" >
      APP
    </router-link>
  </v-toolbar-title>
  <v-spacer></v-spacer>
  <router-link :to="{ name: 'login' }"
               class="sign-in-button"
               v-if="!getProfile.isLoaded">
    SIGNIN
  </router-link>
</v-toolbar>
<profile-sidebar v-if="getProfile.isLoaded"
                 ref="drawer" />

<script>
export default {
data() {
 return {
  drawer: '',
 };
},
components: {
  UserNavButton,
  ProfileSidebar,
  MainFooter,
 },
 created() {
  this.loadProfile();
 },
 computed: {
  ...mapGetters(['getProfile']),
 },
 methods: {
  ...mapActions(['loadProfile']),
 },
};
<script>

---

你的按钮正按你说的去做

  <router-link :to="{ name: 'login' }"
               class="sign-in-button"
               v-if="!getProfile.isLoaded">

当

getProfile.isLoaded

为false时，显示它。这也是你的默认状态

就我个人而言，我会将已加载的

与配置文件数据分离。使用
loadingfinished
数据属性（或
$store
属性）

您真正想要的是仅在满足两个条件时显示该按钮：

装载完毕

您知道用户未登录

只需为
getProfile.isLoaded
设置一个默认值即可。因此，当它等待数据时，您有一个默认值，其中现在显示元素。谢谢您的回答。此属性已具有默认值
false
。当我创建一个有突变的动作时，它被切换到
true
。此变异将
isLoaded
切换为
true
。谢谢您的回答。我从应用商店添加了代码。不幸的是，这个解决方案对我来说没有任何改变（@OlgaB你的商店代码看起来不错。你在视图组件方法中如何调用它？@OlgaB-我根据你的代码编辑了我的答案。希望能有所帮助。非常感谢你的建议。我将此标记为一个解决方案，但我更喜欢在main.js中创建一个方法，检查我是否有令牌。然后我使用基于n这个方法很好用。：）不客气。一种检查方法听起来比我在这里展示的更彻底——但对于StackOverflow上的其他读者来说，像我这样的简单答案更好。开发人员总是可以自己把事情复杂化。
  <router-link :to="{ name: 'login' }"
               class="sign-in-button"
               v-if="!getProfile.isLoaded">