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
  }
})
相关推荐
牧羊狼的狼2 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手3 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲3 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell4 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮5 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel6 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常6 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip7 小时前
JavaScript事件流
前端·javascript
利刃大大7 小时前
【高并发内存池】五、页缓存的设计
c++·缓存·项目·内存池
小菜全7 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json