Vue.js：尽管有条件渲染，元素仍会显示片刻

Question

我有一个带有切换菜单按钮和登录按钮的导航。

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

我有一个基于属性 isLoaded 的条件，它可以是 false 或 true depending on 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>

我的店铺：

export default {
 state: {
 profile: {
  isLoaded: false,
  data: [],
  },
},
actions: {
 loadProfile({ commit }) {
  if (config.token !== '') {
    http
      .post('api')
      .then(({ data }) => {
        commit('SET_PROFILE', data);
      });
  }
 },
},
mutations: {
 SET_PROFILE(state, data) {
  state.profile = {
    isLoaded: true,
    data,
  };
 },
},
getters: {
 getProfile(state) {
  return state.profile;
  },
 },
};

Answer 1

您的按钮完全按照您的指示进行操作。

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

当 getProfile.isLoaded 为假时，您正在展示它。这也是您的默认状态。

就我个人而言，我会将 isloaded 与配置文件数据分离。使用loadingfinished数据属性（或$store属性）

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

加载完成
您知道用户未登录。

Vue.js：尽管有条件渲染，元素仍会显示片刻

Vue.js: Element is shown for a moment despite of conditional rendering

javascript

vuejs2

conditional

conditional-rendering