VUE移动端底部导航路由跳转

<template>
    <div class="menu-box">
        <div @click="$router.push('/')" class="menu-item">
            <div class="icon"></div>
            <div :class="routeCurrent===1?'active':''">首页</div>
        </div >
        <div @click="$router.push('/list')" class="menu-item">
            <div class="icon"></div>
            <div :class="routeCurrent===2?'active':''">列表</div>
        </div>
        <div @click="$router.push('/my')" class="menu-item">
            <div class="icon"></div>
            <div :class="routeCurrent===3?'active':''">我的</div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            routeCurrent: 1
        }
    },
    methods:{
        changeRoute(){
            switch (this.$route.path) {
                case '/':
                    this.routeCurrent = 1
                    break;
                case '/list':
                    this.routeCurrent = 2
                    break;
                case '/my':
                    this.routeCurrent = 3
                    break;
                default:
                    break;
            }
        }
    },
    watch:{
        $route() {
            this.changeRoute();
        }
    }
}
</script>

<style scoped lang="scss">
    .menu-box {
        height: 40px;
        display: flex;
        position: fixed;
        bottom:0;
        left: 0;
        width: 100%;
        border-top: 1px solid rgb(236, 234, 234);
        background: #fff;
    }
    .menu-item {
        flex: 1;
        display: flex;
        height: 100%;
        align-items: center;
        flex-direction: column;
    }
    .menu-item .icon {
        width: 16px;
        height: 16px;
        margin-top: 5px;
        background-image: url('../assets/images/menu.png');
        background-size: 100%;
    }
    .menu-item .active {
        color: palevioletred;
    }
</style>