Vue底部菜单模块

写好的直接用，可指定模块，引入在主页面即可

index.vue

<template>
    <div>
        <Footer specify="如果需要指定页面填写路径即可"></Footer>
    </div>
</template>

<script>
    import Footer from '../components/footer.vue';
    export default {
        components: {
            Footer
        },
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style>
</style>

footer.vue

<template>
    <div class="footer">
        <ul class="muen-list">
            <li v-for="(item,index) in muenList" @click="go(item.link)">
                <img v-if="path==item.link" :src="item.inc2">
                <img v-else :src="item.inc">
                {{item.text}}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            specify: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                muenList: [{
                        inc: require("../src/assets/images/home1.png"),
                        inc2: require("../src/assets/images/home2.png"),
                        link: '/index',
                        text: '首页'
                    },
                    {
                        inc: require("../src/assets/images/notice1.png"),
                        inc2: require("../src/assets/images/notice2.png"),
                        link: '/notice',
                        text: '公告'
                    },
                    {
                        inc: require("../src/assets/images/group1.png"),
                        inc2: require("../src/assets/images/group2.png"),
                        link: '/group',
                        text: '分组'
                    },
                    {
                        inc: require("../src/assets/images/user1.png"),
                        inc2: require("../src/assets/images/user2.png"),
                        link: '/user',
                        text: '我的'
                    },
                ],
                path: ''
            }
        },
        created() {
　　　　　　　　　　//亦可在创建时获取后台数据，动态渲染菜单，数据格式参照muenList
                this.specify ? this.path = this.specify : this.path = this.$route.path == '/' ? '/index' : this.$route.path;

        },
        methods: {
            go(link) {
                this.$router.push(link);
            }
        }
    }
</script>

<style>
    .footer {
         100%;
        position: fixed;
        bottom: 0;
        z-index: 10;
    }

    .muen-list {
        display: flex;
         100%;
        background-color: #fff;
    }

    .muen-list li {
         25%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        font-size: .5rem;
        padding: .3rem;
    }

    .muen-list img {
         1.5rem;
    }
</style>