Question

渲染条件 vue js

2021-01-04

106

javascript vue.js vuex

我创建了一个登录页面，其中我设置了条件。如果未登录则显示 NAVBAR A 如果登录成功则显示 NAVBAR B。在登录过程中，我创建了一个本地存储，其中存储了 token。请问为什么要安装延迟渲染？当用户登录后，它应该渲染导航栏 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”，也许有帮助。

Alireza Gholami

2021-01-04

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')
},

这对我来说很有效。在 Sandbox 中查看。

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

Answer 3

您可以尝试使用 beforeMount 钩子，而不是使用 mounted 钩子。

Yash Maheshwari

2021-01-04