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>