Vue关于 keep-alive的一些用法以及采坑记录

 的使用

App.vue中(根据不同的组件设置是否需要被缓存)

router/index.js里（给不同的组件添加keepAlive属性是否需要被缓存  true表示会   false表示不需要被缓存）

我先说一下设置了  缓存的属性  以下的一些生命周期不会执行

 1、 created() {},

 2、beforeDestroy() {},

 3、 destroyed() {},

采坑1   

由于以上的生命周期不执行,所以前一个页面携带进来的参数不能再created  以及data数据里直接赋值，要么直接在请求接口的方法里使用this.$route.query.参数名；  或者在activated() {}生命周期里赋值this.cardId = this.$route.query.cardId;往后可以直接通过 this.cardid得到值

顺便说一下activated() {}这个生命周期函数,这个是只有设置了keepalive才会生效的

  

碰到如下需求

a组件有一个表单里面的值是从后台获取的但是可以修改,当我点击修改去b组件修改值之后需要把b组件选中的值带到a组件,同时之前填写过的一些信息不能被改

采坑2

我的想法是判断localStorage里是否有该值,如果有就从localStorage拿,不存在就在从接口拿；但是当你退出页面或者退出编辑的时候要清空localStorage

本来是想在生命周期销毁之前删除设置的缓存,由于设置了，销毁的生命周期就失效了,于是想到了切换路由的时候监听页面的路径来清除localStorage,为了安全起见，我在app.vue的销毁生命周期里面又销毁了设置的localStorage一次