vue2底部

用法
            <dibu :urls="urls"></dibu>
            urls: ["/", "/cate", "/category", "/user"],

<template>
    <div class="footer">
        <ul>
            <router-link :to="urls[0]" tag="li" :class="{ hot: idx === 0 }">
                <div class="sw">
                    <span style="height: 0.3rem; margin-bottom: 0.2rem;">首页</span> <i class="iconfont icon-fangzi "></i>
                </div>

            </router-link>
            <router-link :to="urls[1]" tag="li" :class="{ hot: idx === 1 }">
                <div class="sw">
                    <span style="height: 0.3rem; margin-bottom: 0.2rem;">分类</span>
                    <i class="iconfont icon-fenlei"></i>
                </div>

            </router-link>
            <router-link :to="urls[2]" tag="li" :class="{ hot: idx === 2 }">
                <div class="sw">
                    <span style="height: 0.3rem; margin-bottom: 0.2rem;">购物车</span>
                    <i class="iconfont icon-gouwuche"></i>
                </div>

            </router-link>
            <router-link :to="urls[3]" tag="li" :class="{ hot: idx === 3 }">
                <div class="sw">
                    <span style="height: 0.3rem; margin-bottom: 0.2rem;">我的</span>
                    <i class="iconfont icon-mine"></i>
                </div>

            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
    name: "dibu",
    props: {
        urls: {
            type: Array,
        },
    },
    data() {
        return {
            idx: 0,
        };
    },
    created() {
        this.idx = this.urls.indexOf(this.$route.path);
    },
};
</script>
<style scoped lang="scss">
.footer {
    width: 100%;
    height: 1.2rem;
    background-color: white;
    position: fixed;
    left: 0;
    bottom: 0;
    border-top: 0.01rem solid black;
    z-index: 2400;
}

ul {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

ul li {
    list-style: none;
    width: 25%;
    height: 1.2rem;
    text-align: center;
    font-size: 0.3rem;
    line-height: 0.8rem;
}

ul li i {

    font-size: 0.4rem;
}

.hot {
    background-color: #ddd;
    color: orangered;
}
.sw{
    display: flex;
    flex-direction: column
}
</style>