使用JavaScript修改元素樣式時,如何在傳回歷史記錄時實作?
P粉982054449
P粉982054449 2023-08-29 21:03:19
0
2
449

在導覽列中,我已經使用了活動連結的樣式。例如,在導航欄中我有關於我們、聯絡我們、材料、測驗等鏈接,當點擊這些鏈接時,路由會發生變化,例如'http://localhost:3000/about-us'、'http:/ /localhost:3000/material'等,隨後活動類別會套用到該連結上,以便在對應的路由上反白顯示該連結。

在切換連結時,活動類別應用得很正確,但我注意到當從'/material'返回到'/home'之類的歷史記錄時(在瀏覽器中點擊返回按鈕),活動類不會應用。它仍然應用在同一路由的連結上(在點擊返回之前)。

我已經在mounted()中使用javascript將活動類別樣式應用到導航連結上(用於初始路由檢查和應用程式樣式),同時也在點擊連結時進行了切換。

那麼,它在傳回歷史記錄時不會改變的原因是什麼?

P粉982054449
P粉982054449

全部回覆 (2)
P粉960525583

如果你使用vue-router和它的元件,你不需要自己管理這個:)

該元件會為目前活動連結套用一個特殊的CSS類別。預設情況下,CSS類別是router-link-active

文件:https://router.vuejs.org/api/#active-class

#
    P粉395056196

    請注意,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

      最新下載
      更多>
      網站特效
      網站源碼
      網站素材
      前端模板
      關於我們 免責聲明 Sitemap
      PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!