1:下面是tab.vue的目录结构
tab.png
2:下面是tab.vue的内容
<template>
<div class="tab">
<router-link tag="div" class="tab-item" to="/recommend">
<span class="tab-link">推荐</span>
</router-link>
<router-link tag="div" class="tab-item" to="/singer">
<span class="tab-link">歌手</span>
</router-link>
<router-link tag="div" class="tab-item" to="/rank">
<span class="tab-link">排行</span>
</router-link>
<router-link tag="div" class="tab-item" to="/search">
<span class="tab-link">搜索</span>
</router-link>
</div>
</template>
<script>
export default {
name: 'tab'
}
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">
@import "~common/stylus/variable"
.tab
display flex
height 44px
line-height 44px
font-size $font-size-medium
.tab-item
flex 1
text-align center
.tab-link
padding-bottom 5px
color $color-text-l
&.router-link-active
.tab-link
color: $color-theme
border-bottom: 2px solid $color-theme
</style>
3:下面是在app.vue页面上引入tab.vue页面组件
app-tab.png
