当前位置：首页 > news >正文

vue面试题：如何保存页面的当前的状态？

news 2026/1/15 6:52:27

如何保存页面的当前的状态？

既然是要保持页面的状态（其实也就是组件的状态），那么会出现以下两种情况：
- 组件会被卸载：
- - （1）将状态存储在LocalStorage / SessionStorage
  - - 优点：
    - 缺点：
  - （2）路由传值
  - - 优点：
    - 缺点：
- 组件不会被卸载：
- - （1）单页面渲染
  - - 优点：
    - 缺点：
用keep-alive缓存页面

既然是要保持页面的状态（其实也就是组件的状态），那么会出现以下两种情况：

组件会被卸载：

（1）将状态存储在LocalStorage / SessionStorage

只需要在组件即将被销毁的生命周期 componentWillUnmount （react）中在 LocalStorage / SessionStorage 中把当前组件的 state 通过 JSON.stringify() 储存下来就可以了。在这里面需要注意的是组件更新状态的时机。比如从 B 组件跳转到 A 组件的时候，A 组件需要更新自身的状态。但是如果从别的组件跳转到 B 组件的时候，实际上是希望 B 组件重新渲染的，也就是不要从 Storage 中读取信息。所以需要在 Storage 中的状态加入一个 flag 属性，用来控制 A 组件是否读取 Storage 中的状态。

优点：

兼容性好，不需要额外库或工具。
简单快捷，基本可以满足大部分需求。

缺点：

状态通过 JSON 方法储存（相当于深拷贝），如果状态中有特殊情况（比如 Date 对象、Regexp 对象等）的时候会得到字符串而不是原来的值。（具体参考用 JSON 深拷贝的缺点）
如果 B 组件后退或者下一页跳转并不是前组件，那么 flag 判断会失效，导致从其他页面进入 A 组件页面时 A 组件会重新读取 Storage，会造成很奇怪的现象

（2）路由传值

通过 vue-router 的 Link 组件的 prop —— to 可以实现路由间传递参数的效果。
在这里需要用到 state 参数，在 B 组件中通过 history.location.state 就可以拿到 state 值，保存它。返回 A 组件时再次携带 state 达到路由状态保持的效果。

优点：

简单快捷，不会污染 LocalStorage / SessionStorage。
可以传递 Date、RegExp 等特殊对象（不用担心 JSON.stringify / parse 的不足）

缺点：

如果 A 组件可以跳转至多个组件，那么在每一个跳转组件内都要写相同的逻辑。

组件不会被卸载：

（1）单页面渲染

要切换的组件作为子组件全屏渲染，父组件中正常储存页面状态。

优点：

代码量少
不需要考虑状态传递过程中的错误

缺点：

增加 A 组件维护成本
需要传入额外的 prop 到 B 组件
无法利用路由定位页面

用keep-alive缓存页面

除此之外，在Vue中，还可以是用keep-alive来缓存页面，当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行
被包裹在keep-alive中的组件的状态将会被保留：

<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view>
</kepp-alive>

router.js

{path: '/',name: 'xxx',component: ()=>import('../src/views/xxx.vue'),meta:{keepAlive: true // 需要被缓存}
},