vue3.0 keep-alive 失效调试笔记

6,403 阅读1分钟

vue3.0 数据结构发生变化造成keep-alive

其原因为3.0建议使用动态组件方式绑定

<transition name="custom-classes-transition" :duration="{ enter: 300, leave: 200 }" mode="out-in" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
    <router-view v-slot="{ Component }">
        <keep-alive :include="keep">
            <component class="view" :is="Component" />
        </keep-alive>
    </router-view>
</transition>

keep-alive存储判断条件

  • :include="a,b" 逗号分隔
  • :include="/[a|b]/ig" 正则匹配
  • :include = "['a','b']" Array[string] 数组类型匹配
<template>
<transition name="custom-classes-transition" :duration="{ enter: 300, leave: 200 }" mode="out-in" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
    <router-view v-slot="{ Component }">
        <keep-alive :include="keep">
            <component class="view" :is="Component" />
        </keep-alive>
    </router-view>
</transition>
</template>

<script lang="ts">
import {
    Vue,
    Options
} from "vue-class-component";
import {
    mapState
} from "vuex";
type defaltData = {
    include: Array < string > | string;
    [propName: string]: any;
};
@Options({
    name: "Layout"
})
export default class Layout extends Vue {
    // TODO: 数据
    private include: Array < string > = [];
    // TODO:computed
    get keep(): Array < string > {
        let data = this.$store.state.pub.keep;
        return data;
    }
    // TODO: 生命周期
    mounted() {
        this.$router.push({
            name: "404"
        })
    }
    // TODO:自定义事件
  

}
</script>