全国企业信息官网网站,广告网名,一个主机 多个网站,云南网站设计外包如何保存页面的当前的状态#xff1f; 既然是要保持页面的状态#xff08;其实也就是组件的状态#xff09;#xff0c;那么会出现以下两种情况#xff1a;组件会被卸载#xff1a;#xff08;1#xff09;将状态存储在LocalStorage / SessionStorage优点#xff1a;缺… 如何保存页面的当前的状态 既然是要保持页面的状态其实也就是组件的状态那么会出现以下两种情况组件会被卸载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-aliverouter-view v-if$route.meta.keepAlive/router-view
/kepp-alive
router.js
{path: /,name: xxx,component: ()import(../src/views/xxx.vue),meta:{keepAlive: true // 需要被缓存}
},
