Vue通过登录状态控制导航栏的显示

在实际网页开发中的导航栏会根据不同的状态来显示。这里就简单的实现一下，这里没有用到数据监听watch，mounted之类的，所以说比较简单。

未登录状态导航栏

已经登录状态

这里随便给出一个已经登录的状态导航栏

实现

就是用了简单的v-if 来判断，根据是否可以从sessionstorage获取到token。这地方不太明白的同学可以参考这篇文章------>传送门

代码

HTML

      <div class="right menu" v-if="!verifyLogin()">
        <a class="ui item " id="register" href="../register/">
          Register
        </a>
        <a class="ui item" id="login" href="../login/">
          Login
        </a>
      </div>
      <div class="right menu exit" v-else>
        <div class="ui small image" style="width: 90px;">
          <img src="../assets/avatar_1569504708.png" onmouseover="overSelectItem()">
        </div>
        <!--        <el-button @click="onExit">退出登录</el-button>-->
      </div>

JS

export default {
methods: {
    verifyLogin() {
      let check = sessionStorage.getItem('token')
      console.log(check)
      return check
    }
}
}

检查的时候都会之间这个函数来获取token，这样就不会是静态常量的了。