this.$router.push({ path: '/'})无刷新效果

Question

我从A登录后到B，用户名不显示，已经在A页面把信息放入sessionStorage和localStorage中了，但是跳转的时候还是无法一登录直接显示。必须手动刷新才能显示，求解答下。谢谢哦！

Answer 1

localStorage确实要刷新后才能获取到最新的。
localStorage在vue中使用场景是刷新后vuex数据初始化，是防止刷新后vuex数据清空的。

你可以这样用：

this.api.login((res)=>{
    //登录成功后
    window.localStorage.setItem('userInfo',res.data.userInfo);

})

vuex:

state:{
    userInfo:window.localStorage.getItem('userInfo')
}

Answer 2

得看看你代码怎么写的了。

一般不要把用户信息放在localStorage,而是只放一个token,打开页面的时候请求信息，放到vuex，vuex是响应式的，这样比较好一点。
用户信息放localStorage其实是不可靠的，因为都是明文，在前端可以随意修改。

Answer 3

vuex也存了全局的，目前只是做的一个显示用户信息，this.$router.push用这个从A页面登录成功后到B页面，B页面左上角用户信息未显示，但是刷新后才显示。

主页，头部页面，左上角信息显示调用的VUEX中的用户信息