vue底部跳转_详解Vue底部导航栏组件

不多说直接上代码 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:"社区",

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" 通过代码判断是否是当前页面，选择不通的图片

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

}

使用方式：

导入：

以上所述是小编给大家介绍的Vue底部导航栏详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！