Tabbar 标签栏，实现APP底部导航栏

<template>
    <footer>
	    <!--
	    	v-model：	当前选中标签的名称或索引值
	    	route:		是否开启路由模式
	    	active-color：选中标签的颜色
	    	to：		点击后跳转的目标路由对象，同 vue-router 的 to 属性
	    -->
        <van-tabbar v-model="active" active-color="#139BFA" :route="true">
            <van-tabbar-item to='/'>
                <span>首页</span>
                <img slot="icon" slot-scope="props" :src="props.active ? icon.homeActive : icon.homeNormal">
            </van-tabbar-item>
            <van-tabbar-item to='/mall'>
                <span>商城</span>
                <img slot="icon" slot-scope="props" :src="props.active ? icon.mallActive : icon.mallNormal">
            </van-tabbar-item>
            <van-tabbar-item to='/shop_cart'>
                <span>购物车</span>
                <img slot="icon" slot-scope="props" :src="props.active ? icon.shop_cartActive : icon.shop_cartNormal">
            </van-tabbar-item>
            <van-tabbar-item to='/my'>
                <span>个人中心</span>
                <img slot="icon" slot-scope="props" :src="props.active ? icon.myActive : icon.myNormal">
            </van-tabbar-item>
        </van-tabbar>
    </footer>
</template>

<script>
    export default {
        data() {
            return {
                active: 0,//默认索引0选中
                icon: {
                    homeNormal: require('@images/footbar/1.png'),//未选中图标
                    homeActive: require('@images/footbar/1-1.png'),//选中图标
                    
                    mallNormal: require('@images/footbar/3.png'),
                    mallActive: require('@images/footbar/3-3.png'),
                    
                    shop_cartNormal: require('@images/footbar/5.png'),
                    shop_cartActive: require('@images/footbar/5-5.png'),
                    
					myNormal: require('@images/footbar/4.png'),
                    myActive: require('@images/footbar/4-4.png'),
                }
            }
        },
    }
</script>

<style scoped lang="less">
    footer{
        height: 80px;
        background: #fff;
        .van-hairline--top-bottom{
            box-shadow:0px 0px 1px 0px rgba(229,229,229,1);
        }
    }
</style>