v-if实现导航栏登录和未登录状态的切换

了解一下通过v-if语句来实现状态栏的切换

首先我们来看一下简书登录和未登录状态下导航栏的变化

• 未登录状态

  
  未登录状态

• 登录状态

  
  登录状态

我们用判断token是否为空的方式来判定是否有用户登录，主要是根据是否存在loginUser对象来显示不同导航栏

 export default {
    data() {
      return {
        email: '',
        password: ''
      }
    },
    methods: {
      onClick() {
        var that = this;
        this.$http
          .post('http://localhost:8080/sys/list', {"email": this.email, "password": this.password})
          .then(function (response) {
            alert(JSON.stringify(response.data.data.list));
            localStorage.setItem("loginUser", JSON.stringify(response.data.data.list))
            that.$router.push("/")
          })
      }
    }

如果LoginUser存在

   data() {
      return {
        user: JSON.parse(localStorage.getItem('loginUser')),
        personList: []
      }
    },

即user !=null时显示信息

  <b-nav-item v-if="user!=null">
          <router-link to="/">发现</router-link>
        </b-nav-item>
        <b-nav-item v-if="user!=null">
          <router-link to="/subscriptions">关注</router-link>
        </b-nav-item>
        <b-nav-item v-if="user!=null">
          <router-link to="/notifications"><a>消息</a></router-link>
        </b-nav-item>

如果LoginUser不存在

即user==null时

  <b-nav-item href="#" >Aa</b-nav-item>
        <b-nav-item href="#" v-if="user===null"><router-link to="/sign_in">登录</router-link> </b-nav-item>
        <b-nav-item href="#"v-if="user===null"><router-link to="/sign_up">注册</router-link> </b-nav-item>
        <b-nav-item-dropdown right v-if="user!=null">