<template>
    <div ref="main" class="main">
        <transition name="router" mode="out-in">
            <!--<keep-alive :include="cachedViews">
                <router-view :key="keyCache" />
            </keep-alive>-->
            <my-keep-alive :include="cachedViews">
                <router-view :key="keyCache" />
            </my-keep-alive>
        </transition>
    </div>
</template>

<script>
    import myKeepAlive from '@/components/myKeepAlive/myKeepAlive';
    export default {
        name: "sMain",
        components: {myKeepAlive},
        data() {
            return {
            }
        },
        methods: {
        },
        mounted() {

        },
        watch: {

        },
        computed: {
            visitedViews() {
                return this.$store.getters.visitedViews;
            },
            cachedViews() {
                return this.$store.getters.cachedViews;
            },
            keyCache() {
                if(!this.$route.meta.noCache) {
                    return this.$route.fullPath;
                }
                return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date();
            }
        },
    }
</script>

<style lang="scss" scoped>
    .main {
        overflow: hidden;
        .router-enter {
            transform: translateX(20px);
            opacity: 0;
        }

        .router-enter-active, .router-leave-active {
            transition: all .3s ease;
        }

        .router-leave-to {
            transform: translateX(-20px);
            opacity: 0;
        }
    }
</style>
