JavaScript를 사용하여 요소 스타일을 수정할 때 기록을 반환할 때 어떻게 이를 달성할 수 있나요?

Question

내비게이션 바에서는 액티브 링크 스타일을 사용했습니다. 예를 들어 탐색 표시줄에는 당사에 대한 링크, 문의처, 자료, 퀴즈 등이 있습니다. 이러한 링크를 클릭하면 'http://localhost:3000/about-us', '와 같이 라우팅이 변경됩니다. http:///localhost:3000/material' 등을 사용하면 활동 클래스가 링크에 적용되어 해당 경로에서 강조 표시됩니다.

링크를 전환하면 활동 클래스가 올바르게 적용되지만 '/material'에서 '/home'과 같은 기록으로 돌아갈 때(브라우저에서 뒤로 버튼 누르기) 활동 클래스가 적용되지 않는 것으로 나타났습니다. 에 쓰이는. 동일한 경로에 있는 링크에는 계속 적용됩니다(뒤로 클릭하기 전).

Mount()에서 javascript를 사용하여 탐색 링크에 활성 클래스 스타일을 적용하고(초기 경로 확인 및 스타일 적용을 위해) 링크를 클릭할 때 전환했습니다.

그렇다면 역사로 되돌아가도 변하지 않는 이유는 무엇일까요?

Answer 1

vue-router和它的<router-link>컴포넌트를 사용한다면 직접 관리할 필요는 없습니다 :)

이 구성 요소는 현재 활성 링크에 특수 CSS 클래스를 적용합니다. 기본적으로 CSS 클래스는 router-link-active입니다.

으아악

문서: 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