vue中三列布局的导航栏

背景：在H5的开发中，已经会遇到底部导航栏，三列布局，用户可以点击不同的位置，进行切换。一列中上面是图标，下面是文字。因为导航是公共部分，所以在vue项目中，可以把导航抽离出来，作为一个父组件进行调用。 

一、html部分

<template>
    <div class="main>
        <keep-alive exclude="forgeMe">
            <router-view class="main_page" ref="child"/>
        </keep-alive>
        <ul class="tabs">
            <li v-for="(item,index) in tabs" :key="index" :class="[index == pageIdx?'active':'']" @click="changepage(index)">
                <img :src="require('@/assets/images/tabs_0'+(Number(index)+1)+(index==pageIdx>'_active.png':'.png'))">
                <span>{{item}}</span>
            </li>
        </ul>
    </div>
</template>

二、js部分

<script>
/*eslint-disable*/
export default {
    created(){
        var urlParams = this.TOOL.getURLParams(window.location.href);
        this.CONFIG.head.productToken = urlParams.productToken;
        this.changepage(1);
    },
    watch:{
        $router(to,from){
            let idx;
            switch (to,name){
               case 'ProductIntroduction':
                 idx="0";
                 break;
               case 'InformationEntry':
                 idx="1";
                 break;
               case 'CalculationResults':
                 idx="1";
                 break;
               case 'ProductTerms':
                 idx="2";
                 break;
            }
            this.pageIdx = idx;
        }
    },
    methods:{
        changepage(idx){
            this.pageIdx=idx;
            let pathName,para;
            switch(idx){
                case 0:
                  pathName="ProductIntroduction";
                  break;
                case 1:
                  pathName="InformationEntry";
                  this.doNext();
                  break;
                case 2:
                  pathName="ProductTerms";
                  break;
                default:
                  pathName="InformationEntry";
                  break;
            }
            if(this.$router.name=="CalculationReults" || this.$router.name=="PremiumCalculationMain"){//结果页面返回时不记录
                this.$router.replace({name:pathName})
            }else{
                this.$router.push({name:pathName})
            }
        },
        doNext(){
            if(this.$ref['child']){
                this.$refs['child'].$emit('handleChange');
            }
        },
    },
    components；{}，
    data(){
        return{
            tabs:["产品介绍","计划书","条款与须知"],
            pageIdx:'',
        }
    },
}
</script>

三、css部分

<style scoped>
.tabs{position:fixed;bottom:0;left:50%;width:100%;transform:translate(-50%,0);max-width:940px;background:#fff;z-index:10;}
.tabs li{padding:5px 0;display:inline-block;width:33.33%;text-align:center;}
.tabs img{width:30px;display:block;margin:0 auto;}
.tabs span{color:#aaa;margin-top:2px;}
.active span{color:#333;}
.main{height:100%;}
.main_page{height:calc(100% -65px);overflow:auto;}
</style>

相关图片如下所示：