In doing navigation bar, there is always such a demand, which one point on which one is highlighted, the recent discovery of a vue ui library vant, already have such an effect, and would not write himself a css.
<van-tabbar v-model="active">
<van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
<van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
<van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
<van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
export default {
data() {
return {
active: 'home'//普通属性
}
}
}
Look at the code above, you can find active as long as the value of change, you can make the appropriate tab highlighted, but click on the label when should jump to the corresponding route. Van-tabbar-item can be coupled to the attribute, you can jump to the route.
So, which needs to be changed according to the value of active route, this time we can consider the use of computed attribute computed vue to change the value of active.
1. The route is changed, the name of the route can be acquired by the this. $ Route.name
2. computed by calculating the properties of the active to change the value
code as the last modified
<van-tabbar v-model="active">
<van-tabbar-item name="home" icon="home-o" :to="{ name: 'home'}">标签</van-tabbar-item>
<van-tabbar-item name="search" icon="search" :to="{ name: 'search'}">标签</van-tabbar-item>
<van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
<van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
export default {
data() {
return {
}
},
computed: {//计算属性
active () {//获取到路由的名字给active赋值
return this.$route.name
}
}
}
Finally, pay attention to what the name of the route and the corresponding label name, or else not be highlighted. Computed Property active and active as the original common attributes can be bound in the v-model, so use the calculation attribute, with the name of the common attributes deleted, or else error.
