<template>
<div class="home">
    <div class="navs">
        <!-- <a class="nav" v-for="nav in navs" @click="tab = nav.tab">{{ nav.text }}</a> -->
        <router-link class="nav" v-for="nav in navs" :key="nav.tab" :to="nav.link" :replace="true">
            {{ nav.text }}
        </router-link>
    </div>
    <!-- <keep-alive>
        <component :is="'tab-' + tab"></component>
    </keep-alive> -->
    <!-- <router-view></router-view> -->
    <div class="home-content">
        <!-- <router-alive-view></router-alive-view> -->
        <!-- <alive-router-view/> -->
        <router-view/>
    </div>
</div>
</template>

<script>
export default {
    name: 'home',
    keep: true,
    data(){
        return {
            tab: 'a',
            navs: [
                { tab: 'a', text: 'Tab A', link: '/' },
                // { tab: 'b', text: 'Tab B', link: '/tab_b' },
                // { tab: 'c', text: 'Tab C', link: '/tab_c' },
                { tab: 'b', text: 'Tab B', link: '/tab?tab=b' },
                { tab: 'c', text: 'Tab C', link: '/tab?a=1&tab=c&b=2' },
            ],
        };
    },
    created(){
        console.log('home created');
    },
    components: {
        'tab-a': () => import('./home_a.vue'),
        'tab-b': () => import('./home_b.vue'),
    },
}
</script>

<style scoped>
.home {
    width: 460px;
    margin: auto;
}
.navs {
    display: flex;
}
.nav {
    flex: 1 1 auto;
}
.home-content {
    height: 320px;
    overflow: auto;
}
</style>
