PC端
1.app.vue页面
<template>
<div id="app">
<keep-alive>
<!-- 里面是当需要缓存时 显示组件的 router-view-->
<router-view v-if="$route.meta.isAlive" ></router-view>
</keep-alive>
<!-- 外面是不需要缓存时 -->
<router-view v-if="!$route.meta.isAlive" ></router-view>
</div>
</template>
- ，在详情页里面设置 beforeRouteLeave
beforeRouteLeave(to,from,next){
//设置下一个路由的meta,让列表页面缓存,即不刷新
to.meta.isAlive = true
next()
}
在路由文件中 ：router/index.js，给被要被缓存的页面设置 meta 属性（这里就是列表页），不需要缓存的视图，不用添加
实现滚动行为的代码：router/index.js
import VueRouter from "vue-router";
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
// 监理现场检验列表
{
path: "/siteInspection/siteInspectionList",
name: siteInspectionList,
component: siteInspectionList,
meta: {
// isAlive:isAlive为自定义的，true 代表缓存组件，false为不缓存
isAlive: true
}
},
],
scrollBehavior(to, from, savePosition) {
if (savePosition) {
//解决页面从列表页跳转到详情页返回,初始在原来位置
return savePosition;
} else {
//解决页面跳转后页面高度和前一个页面高度一样
return { x: 0, y: 0 };
}
}
});
export default router;
