<router-link to="/home/" tag="div">
<div><i class="el-icon-s-home"></i></div>
<div>首页</div>
</router-link>
</div>
<div class="game">
<router-link :to="{name: 'Game'}" tag="div">
<div><i class="el-icon-s-goods"></i></div>
<div>比赛</div>
</router-link>
</div>
<div class="bbs">
<router-link :to="{name: 'Bbs'}" tag="div">
<div><i class="el-icon-share"></i></div>
<div>社区</div>
</router-link>
</div>
<div class="me">
<router-link :to="{name: 'Me'}" tag="div">
<div><i class="el-icon-s-custom"></i></div>
<div>我</div>
</router-link>
</div>
</div>
</template>
<script>
export default {
name: 'TabBar'
}
</script>
<style scoped>
#tabs {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
text-align: center;
color: #b5b5b5;
}
#tabs i {
font-size: 18pt;
}
.active {
color: #468dcc;
}
</style>
这样就添加了底部导航，然后我们配置home界面，home界面中有二级导航，而且在首页的二级导航选中的时候，需要高亮显示”首页“tab页
Home.vue
<template>
<div id="home">
<div :class="{topbar: true}">
<router-link :to="{name: 'recommend'}" tag="div">推荐</router-link>
<router-link :to="{name: 'nba'}" tag="div">篮球(NBA)</router-link>
<router-link :to="{name: 'video'}" tag="div">视频</router-link>
<router-link :to="{name: 'entertain'}" tag="div">影视娱乐</router-link>
</div>
<div :class="{tabInfo: true}">
<router-view/>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
name: 'home'
}
}
}
</script>
<style scoped>
#home {
display: flex;
flex-direction: column;
text-align: left;
height: 100%;
}
.topbar {
height: 26pt;
font-size: 12pt;
color: #343434;
background: #fbfbfb;
border-bottom: 1pt solid #e6e6e6;
margin-bottom: 10pt;
display: flex;
flex-direction: row;
}
.topbar div {
margin: 0 5pt;
}
.topbar span {
padding-bottom: 11pt;
}
.active {
color: #468dcc;
border-bottom: 1pt solid #468dcc;
font-weight: bold;
}
.tabInfo {
flex: 1;
}
</style>
