一、开启keep-alive
在这里keep-alive配合了router-view使用,keep-alive本身是vue2.0的功能,并不是vue-router的,所以在vue1.0版本是不支持的。
二、产生的问题
keep-alive能使组件数据缓存,因此。如果有一个新闻列表,点击进入查看详情,返回点击查看其他新闻详情这时发现数据并没有更新,造成了数据不刷新的情况。
因此,我试了以下网友提出的解决方法,发现并没有什么用(或许是我弄错了)。
三、我的解决方法
因此,个人拙见,我是这么解决的。在详情组件里监听路由变化再次赋值给ID,通过activated钩子触发请求函数,这时返回详情页面再次进入发现原有的数据还在,但是过几秒后数据就刷新了,数据是刷新了但是体验是非常不好的。因此需要用到另一个钩子deactivated销毁,离开详情页面时(deactivated)通过小技巧把当前的内容隐藏,再次进入详情页面时(activated)就不会看到原来的内容了,然后ajax请求数据完成后把它显示出来即可。
当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
四、2019新发现
使用exclude属性不缓存模板组件即可,没有上面那么复杂了。