解决vue router组件状态刷新消失的问题
场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name:'index',params:res.data})跳转到主页，并在主页显示数据。但是当刷新页面时，由于并不是通过登录接口进入主页，router中没有‘params:res.data'信息，主页无法获取到登录信息。
解决方案：
1、session&服务器渲染
传统的方案是，登录页和主页是单独的两个页面，登录成功后服务器生成用户信息对应的session，然后渲染主页数据，并通过响应头将sessionid传给浏览器并生成相应的cookie文件。这样下次请求页面时，浏览器会在httpheader带上相应的cookie，然后服务器根据cookie中的sessionid判断用户是否登录，再显示用户数据。
如果项目采用前后端分离思想，服务器只提供接口，不进行服务器渲染，那么这种办法是行不通了。
2、$route.query
我们可以在路由跳转的时候带上登录请求的参数：
router.push({name:'index',query:{username:'xxx',password:'xxxxxx'}})
...
this.$ajax({
url:'xxx',
method:'post',
data:{
username:this.$route.query.username,
password:this.$route.query.password
}
})
这样登录参数会被保存在url中，像这样：“http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx”，然后在created钩子中调用登录接口来返回数据。
即使密码进行了加密，将用户名密码这类敏感信息放在url中肯定也是不合理。
3、cookie
另一个办法是把登录参数存入cookie，然后在created钩子中获取cookie中存的信息，再调用登录接口。将用户名密码存入cookie中同样不合理，改进版是登录成功后服务器返回一个token，在有效期内通过token获取用户数据。
cookie存取数据比较麻烦，因为cookie是一个字符串，保存的键值对以"="链接，需要额外写操作cookie的方法。
functionsetCookie(name,value,exdays){
letdate=newDate()
date.setTime(date.getTime()+(exdays*24*60*60*1000))
letexpires='expires='+date.toGMTString()
document.cookie=name+'='+value+';'+expires
}
functiongetCookie(name){
name=name+'='
letcookieArr=document.cookie.split(';')
for(leti=0;i
4、HTML5Web存储
提到Web存储，潜意识肯定觉得很多浏览器都不支持，其实IE8及以上都支持localStorage和sessionStorage了。Vue项目最低支持IE9，所以可以放心的使用Web存储。
localStorage存储数据没有时间限制，不主动删除就不会失效。而sessionStorage是在页面或者浏览器关闭时就会失效，适合本场景应用。
我们可以把token信息存在sessionStorage中，然后每次刷新页面通过token请求数据；但是既然能够把token存储到本地，为什么不直接把常用的数据直接保存到本地呢？利用本地数据，可以减少客户端网络请求，还可以降低服务器负担。
由于sessionStorage中保存的值是字符串，直接赋值非字符串类型会先调用其toString()方法。例如执行sessionStorage.user=user，保存的值却是[objectObject]。我们可以通过JSON.stringify()将需要保存的对象转为JSON字符串再保存到sessionStorage，然后在需要使用时通过JSON.parse()将字符串转回对象。
letuser={
name:'admin',
address:'xxx',
email:'xx@xx.xx'
}
//sessionStorage.user=user//[objectObject]
sessionStorage.user=JSON.stringify(user)
...
letdata=JSON.parse(sessionStorage.user)
总结
以上所述是小编给大家介绍的解决vuerouter组件状态刷新消失的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。