| 路由页面跳转后状态保存实践 | 您所在的位置：网站首页 › vue跳转返回后保留状态 › 路由页面跳转后状态保存实践 |
路由页面跳转后状态保存实践
|
“路由页面跳转后状态保存”指的是在开发业务需求过程中经常会碰到的一种情况——在一个页面（通常是表格页）进行一顿猛如虎的操作之后，点击某一项详情进入另外一个页面之后再返回（点击后退按钮），上一页还可以保持原先的状态不变（页面、搜索词等）。 为什么要保持页面状态主要是为了用户体验。试想一下当你辛辛苦苦翻了好几十页才找到想要的数据时，却一个不小心手滑点进去了另外一条数据，再返回来时早就忘记刚才的页码是多少了，这样的体验会有很大概率让用户心里不爽。 代码示例为了演示方便，在这里称呼原来的组件为“ A 组件”，准备要跳转的组件为“ B 组件”。 在这里准备一个小项目，用 react-router 来模拟路由组件跳转情况。 演示在此例中 A 组件中的状态在 B 组件中跳转回来后会失去，接下来让我们来挽回它~ 既然是要保持页面的状态（其实也就是组件的状态），那么会出现以下两种情况： 前组件会被卸载 前组件不会被卸载那么我们可以按照这两种情况分别得到以下几个方法： A 组件会被卸载： 1. 将状态储存在 LocalStorage / SessionStorage 用法这个方法很简单，只需要在组件即将被销毁的声明周期 componentWillUnmount 中在 LocalStorage / SessionStorage 中把当前组件的 state 通过 JSON.stringify() 储存下来就可以了。在这里面需要注意的是组件更新状态的时机。 比如我们从 B 组件跳转到 A 组件的时候，A 组件需要更新自身的状态。但是如果我们从别的组件跳转到 B 组件的时候，实际上我们是希望 B 组件重新渲染的，也就是不要从 Storage 中读取信息。 所以我们需要在 Storage 中的状态加入一个 flag 属性，用来控制 A 组件是否读取 Storage 中的状态。 代码 const A = ({ history }) => { const [count, setCount] = useState(0); const handleChangeStatus = () => setCount(count + 1); useEffect(() => { // 组件挂载时读取 Storage 状态 const status = JSON.parse(sessionStorage.getItem("_STATUS_A") || "{}"); const { count = 0, flag = false } = status; flag && setCount(count); return () => { // 组件卸载时设置 flag changeStorageStatus("_STATUS_A", "flag", false); }; }, []); return ( 这里是 A 组件 当前计数：{count} 点我 +1 { // 前往 B 组件时保持状态 sessionStorage.setItem("_STATUS_A", JSON.stringify({ count })); history.push("/B"); }} > 跳转到 B 组件 ); }; const changeStorageStatus = (key = "", statusKey = "", status = "") => { const preStatus = JSON.parse(sessionStorage.getItem(key) || "{}"); preStatus[statusKey] = status; sessionStorage.setItem(key, JSON.stringify(preStatus)); }; const B = ({ history }) => { return ( 这里是 B 组件 { // 返回 A 组件时设置 flag changeStorageStatus("_STATUS_A", "flag", true); history.goBack(); }} > 点我返回 ); }; 复制代码演示通过 react-router 的 Link 组件的 prop —— to 可以实现路由间传递参数的效果。 to 接受一个对象，参数可以包括： pathname: A string representing the path to link to. search: A string representation of query parameters. hash: A hash to put in the URL, e.g. #a-hash. state: State to persist to the location在这里我们需要用到 state 参数，在 B 组件中通过 history.location.state 就可以拿到 state 值，保存之。返回 A 组件时再次携带 state 达到路由状态保持的效果。 代码 const A = ({ history }) => { const { count: preCount = 0 } = history.location.state || {}; const [count, setCount] = useState(preCount); // 读取回传状态 const handleChangeStatus = () => setCount(count + 1); return ( 这里是 A 组件 当前计数：{count} 点我 +1 跳转到 B 组件 ); }; const B = ({ history }) => { const [prePageStatus, setPrePageStatus] = useState(); // 保存 A 组件状态 useEffect(() => { const { state } = history.location; state && setPrePageStatus(state); }, []); return ( 这里是 B 组件 点我返回 ); }; 复制代码优点 简单快捷，不会污染 LocalStorage / SessionStorage。 可以传递 Date、RegExp 等特殊对象（不用担心 JSON.stringify / parse 的不足） 缺点 如果 A 组件可以跳转至多个组件，那么在每一个跳转组件内都要写相同的逻辑。 A 组件不会被卸载： 1. 单页面渲染 用法要切换的组件作为子组件全屏渲染，父组件中正常储存页面状态。 代码 const PAGE = { A: Symbol(), B: Symbol(), }; const A = () => { const [page, setPage] = useState(PAGE.A); const [count, setCount] = useState(0); // 读取回传状态 const handleChangeStatus = () => setCount(count + 1); const changePage = (page) => () => { setPage(page); }; switch (page) { case PAGE.A: return ( 这里是 A 组件 当前计数：{count} 点我 +1 跳转到 B 组件 ); case PAGE.B: return ; default: return null; } }; const B = ({ onChangePage }) => { return ( 这里是 B 组件 点我返回 ); }; 复制代码优点 代码量少 不需要考虑状态传递过程中的错误 缺点 增加 A 组件维护成本 需要传入额外的 prop 到 B 组件 无法利用路由定位页面 2.单页面渲染 + 路由匹配 用法在上一例的基础中的改进，利用路由做组件匹配。 代码 const A = ({ history }) => { const [count, setCount] = useState(0); const handleChangeStatus = () => setCount(count + 1); const { pathname } = history.location; const isPage = (path) => { const regExp = new RegExp(`^${path}`); return regExp.test(pathname); }; if (isPage("/B")) { return ; } if (isPage("/")) { return ( 这里是 A 组件 当前计数：{count} 点我 +1 跳转到 B 组件 ); } return null; }; const B = () => { return ( 这里是 B 组件 点我返回 ); }; 复制代码优点 不需要传入额外的 prop 到 B 组件 可以使用路由定位页面 缺点 组件存在耦合 总结 方案 优点 缺点 Storage 兼容性好，不需要额外的库或工具 不支持 Date 等特殊对象；额外代码较多 路由传值 支持特殊对象；不会污染 Storage 额外代码较多 单页面渲染 额外代码较少，不需要担心数据传递过程的错误 无法使用路由定位页面；组件耦合度较高 单页面渲染 + 路由匹配 可以使用路由定位页面、组件耦合度降低（和单页面渲染方法比较） 组件存在耦合问题总而言之，最好的选择方案还是路由传值 或者 单页面渲染 + 路由匹配的方案。主要是还是看业务处理的复杂度，如果组件需要跳转到的页面比较少，完全可以使用单页面渲染 + 路由匹配的方案。如果反之，那还是老老实实使用 react-router 提供的传值方案吧。 |
【本文地址】