渲染条件vue js答案

【问题标题】：Rendering condition vue js渲染条件vue js
【发布时间】：2021-04-09 22:44:35
【问题描述】：

我创建了一个登录页面，我提出条件的地方。如果未登录显示 NAVBAR A 如果登录成功，则显示 NAVBAR B。在登录过程中，我创建了一个本地存储，其中存储了一个令牌。请问为什么装后期渲染？当用户登录时，它应该呈现导航栏 B，如果它首先刷新它就可以工作

我的代码 app.vue

<v-main>
     <NavA v-if="token==='' "/> //if not login
     <NavB v-if="token!='' "/> // if login success
      <router-view />
</v-main>

data: () => ({
    drawer: true,
    token: '',
  }),

  mounted () {
      this.token = localStorage.getItem('token')
  },

【问题讨论】：

给token: null和<NavA v-if="token == null "/>

标签： javascript vue.js vuex

【解决方案1】：

把“mounted”改成“created”，或许有帮助。

【讨论】：

【解决方案2】：

您应该始终使用if-else 条件。

<v-main>
   <NavA v-if="token == null "/> //if not login
   <NavB v-else /> // else login success
   <router-view />
</v-main>

data: () => ({
  drawer: true,
  token: null,
}),

mounted () {
   this.token = localStorage.getItem('token')
},

这对我有用。在沙盒中查看。

https://codesandbox.io/s/charming-aryabhata-pl2k4?file=/src/App.vue

【讨论】：

这个是可以的，但是渲染不行的时候，必须先刷新

【解决方案3】：

您可以尝试使用 beforeMount 挂钩，而不是使用已安装的挂钩。

【讨论】：