共计 950 个字符，预计需要花费 3 分钟才能阅读完成。
问题由来
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…
