vue页面路由缓存的一种方法

vue页面路由缓存的一种

app.vue

// 这个是vue3的
<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive" />
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive" />
    </router-view>
  </div>
</template>

<script setup>
</script>

// 这个是vue2的
<div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>
 </div>

router.js

 {
    path: '/MPcard/MPcard',
    name: 'MPcard',
    component: () => import('../views/MPcard/MPcard.vue'),
    meta: { title: "名片查询",keepAlive:true},
  },
  {
    path: '/MPcard/MPecharts',
    name: 'MPecharts',
    component: () => import('../views/MPcard/MPecharts.vue'),
    meta: { title: "名片图表" },
  },
  {
    path: '/MPechartsZX/MPechartsZX',
    name: 'MPechartsZX',
    component: () => import('../views/MPcard/MPechartsZX.vue'),
    meta: { title: "名片折线图表" },
  },

从 名片查询页面进入到名片图表或着名片折线图表页面，返回的名片查询页面是不需要刷新的，但是从其它页面进来是需要刷新的

页面

/**
 这个是vue3的   
**/
<template>
<div id="mainContent"></div>
</template>
import { ref, onMounted, nextTick, onActivated, onDeactivated } from "vue";
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
const chushih=()=>{
  //这里就发送请求
}
onMounted(() => {
  console.log('刷新了')
  chushih();
});
const refreshFlag=ref('需要刷新')
onBeforeRouteLeave((to, from, next)=>{
  const element = document.getElementById('mainContent').scrollTop
  console.log('前往-to',to)
  console.log('当前也-from',from)
  console.log('离开了的时候当前页面的ID是mainContent的滚动高度',element)
  data.value.scrollTop=element
  // 这个是 进入数组里面的页面，需要缓存的
  let array=['/某某页面路径','/某某页面路径']  //从这几个页面返回的不需要刷新
  if(array.includes(to.path)){
    refreshFlag.value='不需要刷新'
  }else{
    refreshFlag.value='需要刷新'
  }
  next()
})
onActivated(()=>{
  // console.log('回来了',refreshFlag.value)
  if(refreshFlag.value=='需要刷新'){
    chushih()
  }else{
    document.getElementById('mainContent').scrollTop=data.value.scrollTop
  }
})


/**
 这个是vue3  使用 elementPlus的表格的   
**/
<template>
<el-table ref="tableData"></el-table>
</template>

import { ref, onMounted, nextTick, onActivated, onDeactivated } from "vue";
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";

const scrollTop = ref(0);
const refReshFlag = ref("需要刷新");
const scroll = () => {
  nextTick(() => {
    const demo =
      tableData.value.$refs.bodyWrapper.getElementsByClassName(
        "el-scrollbar__wrap"
      )[0];
    demo.addEventListener("scroll", scrollEvent);
  });
};
const scrollEvent = (e) => {
  scrollTop.value = e.target.scrollTop;
  console.log("滚动的距离", scrollTop.value);
};
onMounted(() => {
  scroll();
});
onActivated(() => {
  console.log(refReshFlag.value, "页面回来", scrollTop.value);
  if(refReshFlag.value=='需要刷新'){
    jcsg(); //刷新接口
  }else{
    nextTick(() => {
    const demo =
      tableData.value.$refs.bodyWrapper.getElementsByClassName(
        "el-scrollbar__wrap"
      )[0];
      setTimeout(()=>{
        demo.scrollTop =scrollTop.value;
      },100)
  });
  }
});
onBeforeRouteLeave((to, form, next) => {
  let array = ["/BudgetClass/PageTwo_PC"];
  if (array.includes(to.path)) {
    refReshFlag.value = "不需要刷新";
  } else {
    refReshFlag.value = "需要刷新";
    scrollTop.value = 0;
  }
  next();
});

/**
 这个是vue2的
**/
<template>
<div id="mainContent"></div>
</template>

data(){
return {
   scrollTo: 0,
   refreshFlag: "需要刷新",
}
},
beforeRouteLeave(to, from, next) {
    const element = document.getElementById("mainContent").scrollTop;
    this.scrollTo = element;
    let array = [
      "/某某页面路径",
      "/某某页面路径",
    ];
    if (array.includes(to.path)) {
      this.refreshFlag = "不需要刷新";
    } else {
      this.refreshFlag = "需要刷新";
    }
    next();
  },
  activated() {
    // console.log('缓存activated执行')
    // console.log('回来了',this.refreshFlag)
    if (this.refreshFlag == "需要刷新") {
      this.onSearch();
    } else {
      document.getElementById("mainContent").scrollTop = this.scrollTo;
    }
  },

/**
 这个是vue2  使用 element的表格的   
**/
<template>
<el-table ref="tableData"></el-table>
</template>
data(){
return {
   scrollTo: 0,
   refreshFlag: "需要刷新",
}
},

activated() {
    if (this.refreshFlag == "需要刷新") {
      this.ChuShiHua();
    } else {
      this.$nextTick(() => {
        setTimeout(() => {
          // console.log("不需要刷新", this.scrollTo);
          this.$refs.tableData.$el.querySelector(
            ".el-table__body-wrapper"
          ).scrollTop = this.scrollTo; // 指定位置的像素值
        }, 100);
      });
    }
  },
  beforeRouteLeave(to, from, next) {
    let array = ["/sxs/Totalutilitybill", "/sxs/roomcountpage"]; //从这几个页面返回的不需要刷新
    if (array.includes(to.path)) {
      this.refreshFlag = "不需要刷新";
    } else {
      this.refreshFlag = "需要刷新";
    }
    next();
  },
  mounted() {
    this.$refs.tableData.bodyWrapper.addEventListener("scroll", (res) => {
      this.scrollTo = res.target.scrollTop;
      console.log("当前滚动距离", this.scrollTo);
    });
    this.ChuShiHua();
  },