vue3.2.40,keepalive热更新报错 TypeError: parentComponent.ctx.deactivate is not a function

https://github.com/vuejs/core/issues/6222
https://github.com/vuejs/core/pull/4339#issuecomment-1238984279

目前vue最新版已修复该问题,请尝试更新最新版本
3.2.40版本从github上找到的暂时解决方案如下:
直接复制即可,有include需求的改下注释掉的内容,没有的话应该是直接能用的,不需要修改

<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive>
      <component :is="wrap(route.fullPath, Component)" :key="route.fullPath" />
    </keep-alive>
  </router-view>
</template>

<script>
import { h } from "vue";
// 自定义name的壳的集合
const wrapperMap = new Map()
export default {
  data() {
    return {
      include: [],
    }
  },
  watch: {
    $route: {
      handler(next) {
        // // ??这个按自己业务需要,看是否需要缓存指定页面组件
        // const index = store.list.findIndex(item => item.fullPath === next.fullPath)
        // // 如果没加入这个路由记录,则加入路由历史记录
        // if (index === -1) {
        //   this.include.push(next.fullPath)
        // }
      },
      immediate: true,
    },
  },
  methods: {
    // 为keep-alive里的component接收的组件包上一层自定义name的壳
    wrap(fullPath, component) {
      let wrapper
      // 重点就是这里,这个组件的名字是完全可控的,
      // 只要自己写好逻辑,每次能找到对应的外壳组件就行,完全可以写成任何自己想要的名字
      // 这就能配合 keep-alive 的 include 属性可控地操作缓存
      if (component) {
        const wrapperName = fullPath
        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)
      }
    },
  },
}
</script>
  • 12
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值