问题：

最近接手一个前端项目（本人后端），是基于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生命周期的钩子函数图。