Angular如何实现页面刷新或操作后保持选中tab标签页不变
Tab页编辑完成后异常跳转问题修复方案
- 检查更新操作后的回调逻辑
确认模板列表内容更新接口调用成功后的回调函数,是否存在硬编码跳转至集群列表tab、或者重置tab激活状态为默认值的代码,删除这类强制跳转逻辑即可。 - 修正tab激活状态的控制逻辑
你添加的高亮代码未生效大概率是执行时机不对,或是被后续组件重渲染逻辑覆盖了。你可以将tab激活状态绑定到组件状态(如Vue的data、React的useState)或者URL路由参数中,更新操作执行完成后主动将该状态赋值为模板列表对应的标识即可。
如果用路由参数控制tab激活,更新后跳转页面时要携带当前tab的参数,比如模板列表对应参数为tab=template,跳转时不要省略该参数,避免页面默认加载集群列表tab。 - 阻止表单默认提交行为
如果你的编辑功能基于原生form表单实现,需要在提交事件中添加e.preventDefault(),避免表单默认触发页面刷新,导致tab激活状态重置为默认值。
问题相关参考截图
- 已添加的高亮代码行

- 两个tab标签页展示

内容的提问来源于stack exchange,提问作者Mercy
相关产品推荐
相关产品推荐

