vue列表页跳转到列表详情页再返回到列表页, 页面不刷新保持原来

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>

2. ，在详情页里面设置 beforeRouteLeave

beforeRouteLeave(to,from,next){
    //设置下一个路由的meta,让列表页面缓存,即不刷新
    to.meta.isAlive = true
    next()
}

3. 在路由文件中 ：router/index.js，给被要被缓存的页面设置 meta 属性（这里就是列表页），不需要缓存的视图，不用添加

4. 实现滚动行为的代码：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;