Question

我创建了一个登录页面，我在那里提出了条件。如果未登录，则显示 NVBAR A 如果登录成功，则显示 NAVBAR B。在登录过程中，我创建了一个本地存储，其中存储了令牌。请问为什么是mounted 后期渲染？当用户登录时，它应该呈现导航栏 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')
  },

Answer 1

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

Answer 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

Answer 3

您可以尝试使用 beforeMount hook 而不是使用 mount 的 hook。

渲染条件vue js

3 个答案: