需求:列表点击跳转到详情页,详情页面返回到列表页 ,同时停留在刚才点击的位置
实现方式 Keep-alive
- 路由添加标识
{
path: "/WhiteList",
name: "WhiteList",
component: () =>
import(/* webpackChunkName: "about" */ "../views/system/WhiteList.vue"),
meta:{
keepAlive: true
}
},
- App.vue 判断标识
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
- 跳转时详情缓存滚动了的高度
jumpDetails(item) {
let listScrollTop = document.querySelector(".content").scrollTop;
sessionStorage.setItem("scrollTop", listScrollTop);
this.$router.push("/details");
},
- activated生命周期设置滚动值
activated() {
document.querySelector(".content").scrollTop =
sessionStorage.getItem("scrollTop") || 0;
},