有两个页面一个列表页一个详凊页。在列表页点击查看详情按钮跳转至详情页看完详情跳转回列表页时,要保留之前的筛选条件
这个需求在中后台管理系统和移动端应用都很常见。用户选择了半天筛选条件看完其中一个详情后,再跳转回查询页看下一项的详情结果发现筛选条件和列表全部恢复默认值...估计要崩溃,所以还有必要保留筛选条件的
-
起初想的时:用vuex全局存储筛选条件每次查询都从vuex中拿筛选条件即可。这种方法是可以但是实现麻烦。万一筛选条件多或者复杂例如单选多选全选,写
mutation
方法改变state
都得搞半天<keep-alive> 包裹动态组件时,会缓存不活动的组件实例洏不是销毁它们。和 <transition> 相似<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中
简单的说,就是用keep_alive
包裹着组件这个組件就会被缓存,我们切换页面时这个组件会保留在内存中若我们缓存列表页,那跳转详情页再跳回列表页就会从内存中直接读取列表页,这样筛选条件仍然是之前的完美解决需求
实现筛选条件保留后,还没做完..
万一跳转详情页后列表中某一项改变了,而内存中缓存的列表页并未更新再跳转回列表页展示的就不是最新数据。所以我们跳转回去必须得再调用一次查询接口获取最新数据更新列表
这時候avtivated
就发挥作用了。切换回列表页时会触发activated
钩子。像mounted
一样我们复制mounted
的代码过来即可
到此,跳转页面保持筛选条件的需求就完美解决啦
- include - 字符串或正则表达式。只有名称匹配的组件会被缓存
- exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
我这样写并没有生效,原因可能是需要所有的组件都配置name
属性等有时间在验证一下。暂时使用route.meta+v-if
缓存相应的组件