vue中缓存页面-keep-alive，activated的使用及注意事项

注意一、组件使用<keep-alive>标签包裹或者在router里的meta设置keepAlive为true，否则activated不生效。meta: {keepAlive: false},注意二、一定要在返回上一页或者在去往其它页面时清掉缓存举例说明：A页面去往B页面，然后B页面返回A页面（A页面表单选中的值不能丢失），A页面点击某个按钮去往C页面。这样的话，我们就需要缓存A页面，

Cage0315

2786人浏览 · 2021-03-15 20:02:01

Cage0315 · 2021-03-15 20:02:01 发布

注意一、组件使用<keep-alive>标签包裹或者在router里的meta设置keepAlive为true，否则activated不生效。

meta: {
      keepAlive: false
    },

注意二、一定要在返回上一页或者在去往其它页面时清掉缓存

举例说明：A页面去往B页面，然后B页面返回A页面（A页面表单选中的值不能丢失），A页面点击某个按钮去往C页面。

这样的话，我们就需要缓存A页面，然后B页面返回时，A页面只执行activated，不会执行created。

但是在去往C页面时一定要清掉缓存，否则C页面go(-1)时，A页面显示的是缓存的数据。

清缓存的操作可以放在beforeRouteLeave里

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^