当前位置: 首页 > article >正文

vue3(setup) keep-alive 列表页跳转详情缓存,跳转其它更新

app.vue(或其它入口页)使用keep-alive的include动态设置缓存

注意:有嵌套的页面需要在嵌套内部的router-view上添加keep-alive

<template>
    <router-view v-slot="{ Component}">
        <keep-alive :include="cacheList">
          <component :is="Component" />
        </keep-alive>
     </router-view>
</template>
<script setup lang="ts">
import { cacheStore } from "@/stores";
const store = cacheStore();
// 在store中定义一个cacheList用在存放缓存页面
const cacheList = computed(() => {
    return store.cacheList;
});
</script>

stores的index.ts:使用pinia调控缓存页面的数组

import { defineStore } from "pinia";
import { cacheState } from './types';
const cacheStore = defineStore("cache", {
    state: (): cacheState => ({
        cacheList:[] // keep-alive缓存列表
    }),
    actions: {
        pushCaches(item:string) {
            let set = new Set(this.cacheList);
            set.add(item);
            this.cacheList = Array.from(set);
        },
        popCaches(item:string) {
            let set = new Set(this.cacheList);
            if (set.has(item)) {
                set.delete(item);
            }
            this.cacheList = Array.from(set);
        },
    },
});
export default cacheStore;

list.vue(列表页)

注意:vue3的setup模式使用defineOptions为页面路由命名

<script lang="ts" setup>
import { ref } from "vue";
import { onBeforeRouteLeave} from "vue-router";
import { cacheStore } from "@/stores";
const store = cacheStore();
//路由命名(非组件名)
defineOptions({ name: "list" });
//离开页面守卫
onBeforeRouteLeave((to, _from, next) => {
    // 若跳转的是详情页缓存本页面,否则清除本页缓存
    if (to.name === "detail") {
        store.pushCaches("list");
    } else {
        store.popCaches("list");
    }
    next();
});
</script>

detail.vue(详情页)

<script lang="ts" setup>
//路由命名
defineOptions({ name: "detail" });
</script>


http://www.kler.cn/a/372547.html

相关文章:

  • CPU算法分析LiteAIServer视频智能分析平台噪声检测功能在视频监控中的应用与优势
  • Oracle创建存储过程,创建定时任务
  • Java审计对比工具JaVers使用
  • 【AI模特试衣整合包及教程】CatVTON引领虚拟试衣新时代
  • 在 Vue 中如何自动导入项目中的 less 和 scss 变量和文件
  • 【CUDA代码实践03】m维网格n维线程块对二维矩阵的索引
  • unity 中使用zeroMq和Mqtt 进行通讯
  • layui xm-select
  • HTML入门教程14:HTML图像
  • NewStarCTF2024-Week4-Web-WP
  • 关于微信小程序启用组件按需注入
  • openGauss开源数据库实战十
  • 详解:模板设计模式
  • Linux多机器文件分发
  • 时间序列分类任务---tsfresh库
  • 基于Spring Boot+Vue的健身房管理系统(协同过滤算法、功能非常多)
  • C++初阶(八)--内存管理
  • Spark RDD
  • C# CSV工具类,读取csv文件、将数据导出为csv文件格式,用DataGridView表格控件显示
  • 批量删除redis数据
  • N9300-S16语音芯片:提升电梯播报体验,实现导航声音播报提示
  • Spring Boot 创建项目详细介绍
  • list ------ 是一个带头双向循环的列表
  • 从0到1,解读安卓ASO优化!
  • At dp综合
  • react基础之reactHooks