利用keep-alive实现列表页跳转到详情页，保留列表页的筛选条件

利用keep-alive实现列表页跳转到详情页，保留列表页的筛选条件

一、需求

从列表页跳转到详情页时，返回到列表页时，需要保留筛选条件、筛选结果、tab栏切换等数据

二、思路

方法1

刚开始想到用keep-alive结合beforeRouteEnter和beforeRouteLeave来实现，给需要缓存的页面添加keepAlive：true用来标识，具体的实现可以看keepAlive实现详情页返回列表页数据不刷新的文章

但是尝试之后发现，因为我的路由级组件里面是套用的子组件的，而beforeRouteEnter和beforeRouteLeave在子组件中是无法被触发的，如果一个个去给父组件添加beforeRouteEnter和beforeRouteLeave

再调用子组件中的初始化事件是有点不现实的

方法2

从自己项目特点入手，我的页面结构基本如下

左侧菜单栏是封装好的组件，然后整个页面主体页面封装了一个basicLayout作为统一导出页面，这样就想到了给要缓存的页面都用keepAlive：true标识，然后在左侧点击菜单栏的时候去调用下主体basicLayout的刷新方法就可以了

第一步：添加标识

第二步：给basicLayout刷新方法

利用v-if指令的特性，添加isRouterAlive实现组件刷新的功能，添加reload事件

因为左侧菜单栏和右侧主体页，属于“兄弟”组件，所有这里使用了EventBus去进行触发

第三步：在左侧菜单栏点击时触发reload事件

用的elementUI的munu组件，select菜单激活回调，返回选中菜单的index（路由路径）

这里做了个判断，当点击的菜单项已经是当前页，不做刷新

这样一系列下来，就能成功完成啦