:src="index===idx?item.iconselect:item.icon" 通过代码判断是否是当前页面，选择不通的图片
@click="$router.push(item.push) 跳转到各个页面
style:
.footer{
display: flex;
position: absolute;
left: 0;
bottom: 0;
box-sizing: border-box;
height: 6rem;
background: #909090;
width: 100%;}
div{
flex: 1;
font-size: 30px;
}
div img{
width: 30px;
height: 30px;
}
div p{
color:black;
}
.on{
color: red;
}
使用方式：
导入：
<bnai :idx="0"> </bnai>
以上所述是小编给大家介绍的vue底部导航栏详解整合，希望对大家有所帮助