问题:
最近接手一个前端项目(本人后端),是基于vue+element-ui写的,基础框架已经有了,我只需要有需求时调整一下就好了。
问题出现是在做tab页面缓存是出现了路由跳转但是tab页面却不跳转的问题。
tab页面用的就是element-ui的Tabs 标签页的组件。用过的应该都知道,这个是通过activeName来控制tab页面的。
页面跳转的功能也比较简单,就是实现click事件,通过vue-router实现的。
问题的出现就是需要做缓存,直接通过页面的keepAlive来实现,但是开启了keepAlive后就出现了路由跳转但是tab页面没有跳转的问题。
解决:
刚开始出现这个问题的时候我是懵的,毕竟只是个后端仔。去网上也没找到什么合适的说法。结合现有的问题,路由跳转了也就是vue-router实现跳转没问题,那就是tab页出问题了,然后我想到Tabs 标签页是通过activeName来控制处于哪个tab的,activeName是不是被缓存了所以tab页没跳转而路由跳转了。那么怎么解决这个问题呢。
通过百度大佬们的经验,发现页面开启keepAlive后,进入退出页面时会调用钩子函数activated和deactibated方法,可以在activated方法中指定activeName实现点击时切换tab,配合click事件的vue-router实现的路由跳转就解决了这个问题。
总结:
这是本后端仔解决的第一个前端问题,所以记录一下。也想说的是,遇到问题不要懵,通过现象看本质就很容易找到出现问题的地方然后解决。
常用3个钩子函数:
created():组件实例创建完成,dom还未生成,仅仅触发一次;
mounted是挂载vue实例后的钩子函数,仅仅执行一次;
activated()/deactivated:keep-live开启后,每次进入页面就会触发activated(),退出时触发deactivated
当引入keep-alive 的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
最后贴一个vue生命周期的钩子函数图。