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

app.vue

js 复制代码
<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>

router.js

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: "名片折线图表" },
  },

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

页面

js 复制代码
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=['/MPcard/MPecharts','/MPechartsZX/MPechartsZX']  //从这几个页面返回的不需要刷新
  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
  }
})
相关推荐
林强1812 小时前
前端文件预览docx、pptx和xlsx
前端
计算机学姐2 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
像是套了虚弱散4 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan4 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇5 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15886 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追6 小时前
Vue组件化开发
前端·html
艾德金的溪6 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长7 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH7 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js