Vue 实现带登录状态的导航栏

在写vue项目的时候常会遇到 带登录状态的导航栏 设计，当用户登录后“点击登录”则变换成为用户的具体信息，例如
目前我的做法是将此导航栏写在App.vue文件中，将用户的token存在sessionStorage中，根据token是否存在来渲染右上角的内容。大致思想是：（下图为App.vue部分代码）

 <a-dropdown v-if="user">用户登录了</a-dropdown>
 <a-button v-else type="link" ghost @click="goLogin" style="color:white">点此登录</a-button>

user: !!sessionStorage.getItem('token')

但这样会存在一个问题，就是在登录成功后通过this.$router.push()进入的页面并不会根据token的状态及时更新，也就是说导航栏的右上角不会发生变化，但如果F5刷新一下当前页面，则会变为登录状态。我猜测是因为this.$router.push() 并没有刷新整个页面，所以监测不到App.vue中值的变化。

据此我想出了以下几个可能的解决方案：（1）跳转到相应页面后自动刷新（如window.location.reload()）（2）监听App.vue中user值的变化（3）从vue的生命周期入手。

（1）第一种方法我试验了网上提供的跳转页面后刷新的办法，并没有解决这个问题，可能不是因为当前页面刷新导致的。但感觉大家说的页面刷新方法挺靠谱的，所以搬运一下解决贴：vue刷新当前页面的三种方法
（2）监听这个东西我是没搞明白……放弃
（3）从生命周期下手啦！created和destroy不用考虑了，就来试mounted与updated。将user的变化值放在updated中改变就可以啦！这样每次路由跳转都可以执行一遍updated函数中的内容，完美解决此问题~

附updated函数解决代码：
（1）App.vue 代码

<template>
  <div id="app">
    <a-affix>
      <div id="header">
        <a-menu v-model=