Vue 3 Tabbar解决方案

效果

目录结构

TabbarMain

<template>
    <keep-alive>
        <router-view></router-view>
      </keep-alive>
    <div class="tabberWarp">
        <div class="warp">
                <div class="itemWarp flex_mid"  v-for='(item,index) in tabbarDes' :key="index" @click="changePage(item.page)">

                    <span v-show='selected!=item.page'>
                        <div>
                            <img :src="item.normalImg" />
                        </div>
                    </span>
                    <span v-show='selected==item.page'>
                        <img :src="item.activeImg" />
                    </span>
                    <span v-text='item.txt'></span>

                </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default {
        name: "tabbarMain1",
        components: {
         
        },
        data: function () {
            return {
                selected: '/homepage',
                tabbarDes: [
                    {
                        txt: '表情',
                        page: '/homepage',
                        normalImg: require('@/assets/订单.svg'),
                        activeImg: require('@/assets/订单.svg')

                    },
                    {
                        txt: '皮肤',
                        page: '/news',
                        normalImg: require('@/assets/订单.svg'),
                        activeImg: require('@/assets/订单.svg')
                    },
                    {
                        txt: '词库',
                        page: '/myself',
                        normalImg: require('@/assets/订单.svg'),
                        activeImg: require('@/assets/订单.svg')
                    },
                ]
            }
        },
        methods: {
            changePage: function (path) {
                this.$router.replace(path);
            }
        }
    }
</script>
<style type="text/css">
    .warp {
        width: 100%;
        border-top: 1px solid #eee;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 0;
    }

    .warp img {
        width: 20px;
        height: 20px;
    }

    .tabberWarp img {
        margin-top: 10px;
        margin-bottom: 5px;

    }

    .tabberWarp {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding-bottom: 5px;
        background: #fff;
    }

    .itemWarp {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .itemWarp span {
        font-size: 12px;
    }
</style>

子页面[随便都可以]

路由设置

Main.vue[使用组件]