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时显示信息

  
          发现
        
        
          关注
        
        
          消息
        

如果LoginUser不存在

即user==null时

  Aa
        登录 
        注册