Vue:keep-alive组件缓设计问题

问题描述

页面结构:左侧导航栏,右侧页签,页签中下部是内容显示区。点击左侧导航栏会打开对应的页签,页签中会显示对应的内容。点击页签,会进行对应的页面切换。

每个页签对应的内容分为三个层次,列表页 => 信息页 => 数据填写页

现在有这样一个需求:缓存不同页签中的数据填写页的内容。

举个例子:当前我打开了三个页签,页签A、页签B、页签C,我在页签A中打开了数据填写页填写内容,在没有提交的前提下,我切换到了页签B;然后我又从页签B切换回页签A,这时候,要求页签A中表单的数据是我之前填写的;另一方面,当我每次从页签A的信息页进入数据填写页的时候,都希望表单能够重新加载。

当前面临的问题是

1.页签A数据填写页 => 页签B => 页签A数据填写页。用keep-alive,这条调用链是没问题的。

2.问题是这个,每次我从页签A的信息页进入数据填写页时,进入的都是同一个页面

我需要的解决方案是:

在我每次从页签A的信息页进入数据填写页时,希望能把表单重新加载

谢谢啦!!!


POPMUISE
浏览 748回答 2
2回答

慕田峪7331174

方案1:对于keep-alive的组件进入时有activated的钩子,离开时有deactivated钩子,你可以在这两个钩子函数里面操作数据比如 刚进入时候 或者 要离开的时候 把表单页面内容清空方案2:keep-alive有一个exclude属性(exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。),你可以把不用缓存的表单

翻阅古今

不用keep-alive
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Vue.js