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
  }
})


/**
 这个是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;
    }
  },