背景：
移动端项目为Hybrid，用原生webview新开页面方式耗时，客户投诉打开慢，所以架构升级，路由跳转普遍替换为router.push+keep-alive的方式，但是如果都用keep-alive，返回再进页面不刷新，所以需要实现前进刷新，后退缓存的效果
步骤：
-
项目布局层给router-view设置keep-alive
-
给keep-alive设置include，include用vuex进行存储
-
注册popstate事件，每次页面返回，出栈，将当前路由的match均保存起来
window.addEventListener('popstate', this.handlePopState)handlePopState() { this.justGoBackRouteNameList = getMatchedRouteNameList(this.$route) }`/** * 获取相关路由list * @param {Object} route 路由对象 * @returns {String[]} */
const getMatchedRouteNameList = route => route.matched.map(item => item.name).filter(item => !!item)`
问题：
- 遇到tab结构，每个tab都有单独的route，tab之间是通过router.push方式切换，无法触发popstate事件，最终均会被缓存下来，如果遇到其他页面复用了某个tab组件，那么这些组件就没法再次进入的时候就不会被更新
方案：
-
将tab路由跳转改成同路由下组件切换的方式，这样tab切换不涉及组件缓存
-
将子tab组件改成watch监听id实现页面刷
-
如果页面重复push跳转，会使用缓存页面，导致页面不更新，如果用watch工作量太大，
考虑更新上面keep-alive的逻辑，更新后如下
