nuxt3에서 탐색 링크 선택 상태를 우아하게 구현하는 방법은 무엇입니까?

nuxt3는 탐색 링크 선택 상태를 우아하게 구현합니다

NUXT3 개발에서는 사용자 경험을 향상시키기 위해 검사 된 상태를 탐색 링크에 추가하는 것이 중요합니다. 이 기사는 NUXT3 에서이 효과를 달성하는 방법을 자세히 설명하고 그림에 표시된 문제를 해결합니다.

이미지는 강조 표시를 보여줍니다<a></a> 상표. 구현의 핵심은 NUXT3 라우팅 시스템에서 제공하는 두 개의 사전 설정 클래스 이름을 사용하는 것입니다 : .router-link-active 및 .router-link-exact-active .

.router-link-active 클래스에는 현재 경로 경로가 포함됩니다.<nuxt-link></nuxt-link> 구성 요소 대상 경로를 자동으로 추가하십시오. 예를 들어,<nuxt-link></nuxt-link> 포인트 /about , 현재 경로는 /about/contact 이며. .router-link-active 클래스가 추가됩니다.<nuxt-link></nuxt-link> 우수한.

.router-link-exact-active 클래스는 현재 경로 경로가있는 경우에만 더 엄격합니다.<nuxt-link></nuxt-link> 구성 요소 대상 경로가 정확히 일치하는 경우에만 추가됩니다. 위의 예제에 따라, .router-link-exact-active 클래스는 현재 경로가 /about 때만 추가됩니다.

따라서이 두 클래스 이름에 대한 CSS 스타일을 작성하여 선택한 상태를 달성 할 수 있습니다. 예를 들어:

 .Router-Link-Active {
  배경색 : #f0f0f0;
  색상 : #333;
}

.Router-Link-Exact-Active {
  글꼴 중량 : 대담한;
}

이 CSS 코드는 선택한 링크 배경을 밝은 회색으로 변경하고 글꼴은 짙은 회색이됩니다. 정확히 일치하면 글꼴이 대담합니다. 스타일은 설계 요구에 따라 조정할 수 있습니다. assets/css 디렉토리의 스타일 파일과 같은 NUXT3 프로젝트에 CSS 코드를 추가해야합니다. 이를 통해 NUXT3 Navigation 링크의 선택된 상태를 쉽게 달성 할 수 있습니다.

위 내용은 nuxt3에서 탐색 링크 선택 상태를 우아하게 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!