使用 v-if 隐藏 VueJS 组件

Question

我有一个网站，登录时我把登录时的用户名放在 localStorage 上。所以这是在 Login.Vue 上

login() {
  axios.post('/login', this.user)
  .then((response) => {
    alertify.set('notifier','delay', 3);
    alertify.success("Success! You are now logged in.");

    axios.get("/user", this.user)
    .then((response) => {
      this.$router.push('/home');
      AuthPlugin.setUser(this.user.username);
    })
  })
  .catch(function (error) {
    alertify.set('notifier','delay', 0);
    alertify.error('Invalid User');
  });
}

我使用我制作的 AuthPlugin 来做到这一点：

setUser(user) {
    localStorage.setItem('authUser', user);
}

在每个页面上的组件 Header.vue 上，我的用户名显示在每个页面上，表明他在线。

<template>
    <div id="header-bar" v-if="!username">
        <nav class="navbar navbar-toggleable-md navbar-light bg-faded p-0 fixed-top">
        <a href="#">Your are online {{username}}</a>
        <a href="#"  @click="logout">Log out</a>
        </nav>
    </div>
</template>
<script>
  import AuthPlugin from '../../plugin/Auth.js';
  import axios from 'axios';
    export default {
        data() {
            return {
                users: {},
                username: localStorage.authUser
            }
        },
        methods: {
          logout() {
            AuthPlugin.destroyToken();
                AuthPlugin.destroyUser();
                this.$router.push('/');
          },
          getUsers() {
                axios.get("/user")
                  .then((response) => {
                        this.users = response;
                  })
          }
       }
    }
</script>

在注销时我会销毁 AuthPlugin 中的令牌和用户

destroyToken() {
    localStorage.removeItem('token');
    localStorage.removeItem('authTokenExpiration');
},
destroyUser() {
    localStorage.removeItem('authUser');
}

我将 App.vue 上的 header comp 放在每个页面上。

<template>
    <div>
        <app-header></app-header>
        <router-view></router-view>
    </div>
</template>

所以当我注销时，我会从 localStorage 中删除 authUser。我希望当我单击注销并重定向到“/”，这是登录组件时，该标题被隐藏。

这些是路线

export const routes = [
  {path: '/', component: Login},
  {path: '/home', component: Home, meta: {requiresAuth: true}},
  {path: '/events', component: Events, meta: {requiresAuth: true}},
  {path: '/events/new-event', component: NewEvent, meta: {requiresAuth: true}},
  {path: '/events/edit-event/:id', component: EditEvent, meta: {requiresAuth: true}}
]

现在如果我点击注销，当我被重定向到登录时，标题消失了，但是当我输入用户名并传递给登录并进入网站时，标题仍然隐藏。

为什么标题是隐藏的？如果我在浏览器控制台中输入 localStore.authUser 并回车，我会看到我用来登录的用户名。

请有人告诉我，我在那个 v-if 中做错了什么？或者请告诉我是否可以使用 diff 方法在注销时隐藏该标题。

Answer 1

这样做的最好方法似乎是在 router.js 中放置一个元标记 -

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: { hideNavigation: true }
    }
  ]
})

并在 Vue 模板中使用它 -

<navigation v-if="!$route.meta.hideNavigation" />

Answer 2

您的Header 组件正在监视其自己的 username 属性的更改。 实例化组件时，会从localStorage 复制一次值。

我的建议是让用户名（和可选的用户）成为你的根 Vue 对象的一个​​属性，并在你的 setUser 函数中更新它。 然后，您可以将用户名作为 props 传递给 Header 组件，或者在 Vue 实例用户名更改时使用 vm.$watch 更新组件的 username。

Answer 3

可能的解决方法：

<div id="header-bar" v-if="!username && !$route.path === '/'">

Answer 4

您可以做一件事，将 v-if 签入 App.vue：

<template>
    <div>
        <app-header v-if="!username"></app-header>
        <router-view></router-view>
    </div>
</template>

还有数据：

data() {
       return {
         username: localStorage.authUser
       }

},

这将直接绑定标题。