不多說(shuō)直接上代碼 BottomNav.vue：

<template>	<div class="footer">		<div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)">			<img :src="index===idx?item.iconSelect:item.icon">			<p :class="['colorChange',{on:index===idx}]" >{{item.name}}</p>		</div> 	</div></template> <script type="text/javascript">		export default{		props:['idx'],		data(){			return {				items:[{					cls:"home",					name:"首頁(yè)",					push:"/home",					icon:"../static/home.png",					iconSelect:"../static/home_select.png"				},				{					cls:"shares",					name:"股票",					push:"/shares",					icon:"../static/home.png",					iconSelect:"../static/home_select.png"				},				{					cla:"community",					name:"社區(qū)",					push:"/community",					icon:"../static/home.png",					iconSelect:"../static/home_select.png"				},				{					cla:"mine",					name:"我的",					push:"/mine",					icon:"../static/home.png",					iconSelect:"../static/home_select.png"				}]			}		}	}  </script>

:src="index===idx?item.iconSelect:item.icon" 通過(guò)代碼判斷是否是當(dāng)前頁(yè)面，選擇不通的圖片

@click="$router.push(item.push) 跳轉(zhuǎn)到各個(gè)頁(yè)面

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;	}

使用方式：

導(dǎo)入：

<BNai :idx="0">	 			</BNai>

以上所述是小編給大家介紹的Vue底部導(dǎo)航欄詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！