在導覽列中,我已經使用了活動連結的樣式。例如,在導航欄中我有關於我們、聯絡我們、材料、測驗等鏈接,當點擊這些鏈接時,路由會發生變化,例如'http://localhost:3000/about-us'、'http:/ /localhost:3000/material'等,隨後活動類別會套用到該連結上,以便在對應的路由上反白顯示該連結。
在切換連結時,活動類別應用得很正確,但我注意到當從'/material'返回到'/home'之類的歷史記錄時(在瀏覽器中點擊返回按鈕),活動類不會應用。它仍然應用在同一路由的連結上(在點擊返回之前)。
我已經在mounted()中使用javascript將活動類別樣式應用到導航連結上(用於初始路由檢查和應用程式樣式),同時也在點擊連結時進行了切換。
那麼,它在傳回歷史記錄時不會改變的原因是什麼?
如果你使用
vue-router
和它的
元件,你不需要自己管理這個:)該元件會為目前活動連結套用一個特殊的CSS類別。預設情況下,CSS類別是
router-link-active
。文件:https://router.vuejs.org/api/#active-class
#請注意,Nuxt中的類別其實是
nuxt-link-active
nuxt-link-exact-active
#這裡有一個範例:https://nuxtjs.org/examples/routing-active-links-classes
#可以透過設定進行更改,如下所示:https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#linkactiveclass