1、App.vue
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
2、router.js
{
path: "/keepAliveDemo",
name: "keepAliveDemo",
component: () => import("@/views/test/keep-alive/index.vue"),
meta: {
title: "keepAlive使用示例",
keepAlive: true,
isRefresh: true,
},
},
3、keep-alive/index.vue(缓存页面)
activated() {
// isRefresh:表示是否需要刷新
if (this.$route.meta.isRefresh) {
this.list = [];
// 手动刷新页面操作,重置表单、列表、请求.....
}
},
beforeRouteLeave(to, from, next) {
// 去详情页则将isRefresh改为false,因为从详情页返回不用刷新页面
// 去非详情页则将isRefresh改为true,因为从其他页面进来需要刷新页面
if (to.name == "keepAliveDetails") {
from.meta.isRefresh = false;
} else {
from.meta.isRefresh = true;
}
next();
},
4、需求描述:需要缓存列表页面,从列表页点击跳转至详情页,从详情页返回需要缓存之前的数据以及定位到查看详情的项,从其他页面进入列表页需要刷新。
ps:定位元素使用 document.getElementById(`定位元素id`).scrollIntoView();