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

问题描述

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

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

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

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

当前面临的问题是

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

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

我需要的解决方案是:

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

谢谢啦!!!

阅读 2.1k
2 个回答

不用keep-alive

方案1:

 对于keep-alive的组件进入时有activated的钩子,离开时有deactivated钩子,你可以在这两个钩子函数里面操作数据

比如 刚进入时候 或者 要离开的时候 把表单页面内容清空

方案2:

keep-alive有一个exclude属性(exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。),你可以把不用缓存的表单页的组件名称放到这割属性里面
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题