解决vuerouter组件状态刷新消失的问题
场景：vue-router实现的单页应⽤，登录页调⽤登录接⼝后，服务器返回⽤户信息，然后通过router.push({name: 'index', params: res.data})跳转到主页，并在主页显⽰数据。但是当刷新页⾯时，由于并不是通过登录接⼝进⼊主页，router中没有‘params:
res.data'信息，主页⽆法获取到登录信息。
解决⽅案：
1、session&服务器渲染
传统的⽅案是，登录页和主页是单独的两个页⾯，登录成功后服务器⽣成⽤户信息对应的session，然后渲染主页数据，并通过响应头将sessionid传给浏览器并⽣成相应的cookie⽂件。这样下次请求页⾯时，浏览器会在http header带上相应的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中肯定也是不合理。
3、cookie
另⼀个办法是把登录参数存⼊cookie，然后在created钩⼦中获取cookie中存的信息，再调⽤登录接⼝。将⽤户名密码存⼊cookie中同样不合理，改进版是登录成功后服务器返回⼀个token，在有效期内通过token获取⽤户数据。
cookie存取数据⽐较⿇烦，因为cookie是⼀个字符串，保存的键值对以 "=" 链接，需要额外写操作cookie的⽅法。
function setCookie (name, value, exdays) {
let date = new Date()
date.Time() + (exdays * 24 * 60 * 60 * 1000))
let expires = 'expires=' + GMTString()
}
function getCookie (name) {
name = name + '='
let cookieArr = kie.split(';')
for (let i = 0; i < cookieArr.length; i++) {
react router6
let cookie = cookieArr[i].trim()
if (cookie.indexOf(name) === 0) {
return cookie.slice(name.length)
}
}
return ''
}
4、HTML5 Web存储
提到Web存储，潜意识肯定觉得很多浏览器都不⽀持，其实IE8及以上都⽀持localStorage和sessionStorage了。Vue项⽬最低⽀持IE9，所以可以放⼼的使⽤Web存储。
localStorage存储数据没有时间限制，不主动删除就不会失效。⽽sessionStorage是在页⾯或者浏览器关闭时就会失效，适合本场景应⽤。
我们可以把token信息存在sessionStorage中，然后每次刷新页⾯通过token请求数据；但是既然能够把token存储到本地，为什么不直接把常⽤的数据直接保存到本地呢？利⽤本地数据，可以减少客户端⽹络请求，还可以降低服务器负担。
由于sessionStorage中保存的值是字符串，直接赋值⾮字符串类型会先调⽤其toString()⽅法。例如执⾏sessionStorage.user =
user，保存的值却是[object Object]。我们可以通过JSON.stringify()将需要保存的对象转为JSON字符串再保存到sessionStorage，然后在需要使⽤时通过JSON.parse()将字符串转回对象。
let user = {
name: 'admin',
address: 'xxx',
email: ''
}
// sessionStorage.user = user // [object Object]
sessionStorage.user = JSON.stringify(user)
...
let data = JSON.parse(sessionStorage.user)
总结
以上所述是⼩编给⼤家介绍的解决vue router组件状态刷新消失的问题，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。