Vue3 对跳转 同一路由传入不同参数的页面分别进行缓存

1:使用场景

从列表页跳转至不同的详情页面,对这些详情页面分别进行缓存

2:核心代码

2.1: 配置路由文件

在路由文件里对需要进行缓存的路由对象添加meta 属性

// 需要缓存的详情页面路由

{

name: detail,

path: '/myRouter/detail', // 路径

component: () => import('../views/abc/detail.vue'),

meta: {

keepAlive: true, // 是否被缓存

},

},

2.2: app页面增加缓存逻辑

<template>

<el-config-provider :locale="locale">

<!-- 有条件的进行缓存 -->

<transition mode="out-in" name="fade">

<router-view v-slot="{ Component }">

<keep-alive :include="includeList">

<component :is="wrap(route?.name , route.query, Component)" :key="route.fullPath" />

</keep-alive>

</router-view>

</transition>

</el-config-provider>

</template>

wrap 方法

javascript 复制代码
    const wrapperMap = new Map();

    const wrap = (name:any, query:any, component:any) => {
      let wrapper;
       let wrapperName;
      if(query.catchName){
           wrapperName = name + '-' + query.catchName;
      }else {
          wrapperName  = name;
      }
    
      if (wrapperMap.has(wrapperName)) {
        wrapper = wrapperMap.get(wrapperName);
      } else {
        wrapper = {

          name: wrapperName,

          render() {
            return h('div', { className: 'vaf-page-wrapper' }, component);
          },

        };

        wrapperMap.set(wrapperName, wrapper);
      }

      return h(wrapper);
    };

watch 监听对于route.query 是否存在catchName 参数的路由分别进行缓存

javascript 复制代码
// 监听路由,判断页面是否需要缓存
    watch(
      () => route,
      (newVal: any, oldVal) => {
       
        if (newVal.query?.catchName) {
          if (newVal.meta.keepAlive && !state.includeList.includes(newVal.name + '-' + newVal.query?.catchName)) {
            state.includeList.push(newVal.name + '-' + newVal.query?.catchName);
          }
        } else if (newVal.meta.keepAlive && !state.includeList.includes(newVal.name)) {
          state.includeList.push(newVal.name);
        }
      },
      {
        deep: true, // 开启深度监听
      },
    );

2.3: 在列表页面的查看点击方法中配置路由添加query 传参 catchName

注:上面为核心代码逻辑,需要根据实际情况进行调整。

相关推荐
古一|4 分钟前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
peachSoda76 分钟前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
@PHARAOH18 分钟前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金3904128 分钟前
flutter 仿商场_首页
前端
少卿29 分钟前
react-native图标替换
前端·react native
熊猫钓鱼>_>34 分钟前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
敲敲敲敲暴你脑袋36 分钟前
Canvas绘制自定义流动路径
vue.js·typescript·canvas
JYeontu1 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_1 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
盛夏绽放1 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app