programing

Vue router-link 완전 액티브클래스

newsource 2022. 10. 6. 22:00

Vue router-link 완전 액티브클래스

3개의 메뉴 탭(즉,router-links) 3개의 다른 루트에 대응합니다.

/        --> home
/users   --> users
/posts   --> posts

첫 번째router-link에 가는 것/가지고 있다exact적용된 속성으로 인해 활성화클래스가 수신되지 않습니다./users또는/posts이것은 대부분의 경우에 유효합니다만, 쿼리 파라미터의 허용을 계획하고 있습니다./예를 들어 다음과 같습니다.

/?ref=producthunt

이 경우,/ router-link는 아직 활성화 되어 있을 것입니다.하지만, 내가 가지고 있는 것은exact이 속성은 url과 일치하지 않습니다.refquery 파라미터.루트 및 플립클래스를 테스트하기 위해 컴포넌트에 로직을 추가하는 것 외에router-link이 문제를 해결하기 위해 사용할 수 있는 컴포넌트?

router-link를 사용하여 ref 쿼리 매개 변수를 사용하여 '/'로 이동하려면 설정하기만 하면 됩니다.ref의 쿼리 속성으로서router-link? 계속 사용할 수 있습니다.exact.

<router-link :to="{ path: '/', query: { ref: 'producthunt' } }" exact>home</router-link>

데모를 확인해 주세요.

갱신필
이왕이면vue-router의 설정상의 문제, url은 다음과 같습니다.http://example.com/?ref=producthunt고급 구성 없이 자동으로 홈 컴포넌트로 이동합니다.다음과 같은 파라미터가 없기 때문입니다.exact(방금 vue-cli에 의해 구축된 vuejs2+웹팩 프로젝트에서 시도했습니다)자택으로 향하지 않았다면 서버 어플리케이션의 설정 등 다른 부분에 이상이 없는 것은 아닐까요?

언급URL : https://stackoverflow.com/questions/45777950/vue-router-link-exact-active-class