使用JavaScript修改元素樣式時，如何在傳回歷史記錄時實作？

Question

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

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

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

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

Answer 1

如果你使用vue-router和它的<router-link>元件，你不需要自己管理這個：）

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

<style>
/* 样式化当前活动链接 */
.router-link-active {
   background-color: blue;
}
</style>

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

#

Answer 2

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