不多說直接上代碼 BottomNav.vue：

{{item.name}}

export default{

props:['idx'],

data(){

return {

items:[{

cls:"home",

name:"首頁",

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"

}]

}

}

}

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

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

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)入：

以上所述是小編給大家介紹的Vue底部導(dǎo)航欄詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

總結(jié)

以上是生活随笔為你收集整理的vue底部跳转_详解Vue底部导航栏组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。