Vue->實現點擊導航高亮效果

前言

在大多數一棟Apple中都能常常見到一種效果就是選項卡、底部導航、頭部導航，在vue中也有嵌套路由這樣的實現，本文中主要講述的是底部導航欄點擊選中讓其有一個高亮的狀態。那這個怎麼作呢，請聽我一一道來！

第一步
在路由配置文件中的routers數組對象上面加入代碼

linkActiveClass: 'active'
複製代碼

第二步
在你須要高亮的router-link標籤中加入active-class屬性

<router-link to='/recommend' tag='div' active-class="class類名字">
    //DOM
</router-link>
複製代碼

第三步
在style中編寫active-class中給定的class類名樣式

.class類名 {
    color: green
}
複製代碼

效果圖

結束語

但願個人分享對你有所幫助，更多資訊請持續關注，我會分享愈來愈多的實戰經驗哦！ 或加入大前端知識體系社區一塊兒探索技術:608229520