解决vue router组件状态刷新消失的问题

最新推荐文章于 2024-08-16 16:06:44 发布

霜如明月

最新推荐文章于 2024-08-16 16:06:44 发布

阅读量2.6k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/q3254421/article/details/85489771

版权

在Vue Router的单页应用中，面临刷新后组件状态丢失的问题。文章介绍了多种解决方案，包括传统服务器渲染配合session、利用$route.query传递参数、使用cookie存储token、以及HTML5的Web Storage（sessionStorage）。强调了在现代前端应用中，sessionStorage用于存储token并根据token获取用户数据的方法，同时指出存储复杂对象时需要进行JSON序列化与解析。

摘要由CSDN通过智能技术生成

场景：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中，像这样࿱