vue项目中keep-alive缓存，从详情页返回列表时保存上一步的信息

问题由来1、最近用vue做前端项目，从查询页面进入详情页时，返回页面需要保留上次的查询条件，表格当前页数。2、从其他菜单进去，不需要缓存，要保持页面的初始状态。基于上面两种情况，我打算用vue中的keep-alive来缓存页面。问题的解决方法用vue的内置组件keep-alive来缓存列表页面，再路由出口渲染组件时配置：<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view>在路由选项中，配置meta属性，keepAlive为true即为需要缓存，同时设置isBack属性，用来标识页面是否是从详情页面返回的。{ name:‘borrow’, path:’/borrow’, component:borrow, meta: { keepAlive:true, isBack: true, },}通过beforeRouteEnter(to,from,next)，来判断路由是从哪里跳转的，如果是从详情页跳转的，将当前路由对象的meta.isBace设置为true，否则设置为false。（设置在查询页面）beforeRouteEnter(to, from, next) { if (from.path == “/addborrow”) { to.meta.isBack = true; } else { to.meta.isBack = false; } next();},为了在其他页面进入时，更新页面中的列表数据和查询条件，我们将在activated钩子函数中挂在页面初次进入时的请求数据。当进入详情页，需要对该条数据进行修改时，修改成功后返回，应该更新列表。activated() { if (!this.$route.meta.isBack) { this.handleClear(‘queryForm’);/清空查询条件/ }else{ this.$route.meta.isBack = false; this.getBorrowList();/列表重新加载/ }},参考资料https://yq.aliyun.com/article…