vue 底部选项卡

<template>
    <div class="layout">
        <router-view />
        <div class="navbar_bottom">
            <ul>
                <li @click="to(v, i)" v-for="(v, i) in tab" :key="i" :class="{ active: active === i }">{{ v.name }}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data: () => ({
        tab: [
            { name: "首页", to: '/layout/index' },
            { name: "运动", to: '/' },
            { name: "圈子", to: '/' },
            { name: "我的", to: '/' },
        ],
        active: 0
    }),
    methods: {
        to(v, i) {
            console.log(v, i);
            this.$router.push(v.to)
            this.active = i
        }
    }
}
</script>

<style lang="scss" scoped>
.layout {
    height: 100%;
    background-color: rgb(0, 121, 177);

    .navbar_bottom {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;

        ul {
            width: 100%;
            height: 100%;
            display: flex;
            font-size: 16px;
            justify-content: space-around;
            align-items: center;

            li {
                &.active {
                    color: #00d1ec;
                }
            }
        }
    }

}
</style>