vue页面路由缓存的一种方法
vue页面路由缓存的一种
app.vue
app.vue页面需要这样写：https://blog.csdn.net/shoping110/article/details/129237854?ops_request_misc=&request_id=&biz_id=102&utm_term=vue3%E7%9A%84keep-alive%E5%A4%9A%E9%A1%B5%E9%9D%A2%E4%BD%BF%E7%94%A8&utm_medium=distribute.pc_search_result.none-task-blog-2blogsobaiduweb~default-0-129237854.nonecase&spm=1018.2226.3001.4450
注意：多个页面使用keepAlive需要标明key，否则会报错。单个页面使用则不需要。max表示最大缓存几个页面，根据项目需要加上 name标识后，即使你在a页面已经写了keepAlive，从a前往b页面需要缓存一下状态，然后又要从b页面前往C页面也需要缓存一下b页面。也是可以成功的
// 这个是vue3的
<template>
<div id="app">
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
</keep-alive>
<component :is="Component" :key="$route.name" 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: "名片图表",keepAlive:trueji },
},
{
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();
},