Vue router-link 완전 액티브클래스
3개의 메뉴 탭(즉,router-link
s) 3개의 다른 루트에 대응합니다.
/ --> home
/users --> users
/posts --> posts
첫 번째router-link
에 가는 것/
가지고 있다exact
적용된 속성으로 인해 활성화클래스가 수신되지 않습니다./users
또는/posts
이것은 대부분의 경우에 유효합니다만, 쿼리 파라미터의 허용을 계획하고 있습니다./
예를 들어 다음과 같습니다.
/?ref=producthunt
이 경우,/
router-link
는 아직 활성화 되어 있을 것입니다.하지만, 내가 가지고 있는 것은exact
이 속성은 url과 일치하지 않습니다.ref
query 파라미터.루트 및 플립클래스를 테스트하기 위해 컴포넌트에 로직을 추가하는 것 외에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
'programing' 카테고리의 다른 글
HTML을 PHP 함수로 되돌리는 방법이 있습니까?(반환값을 문자열로 작성하지 않음) (0) | 2022.10.06 |
---|---|
numpy.random.seed(0)의 역할은 무엇입니까? (0) | 2022.10.06 |
Python 3.7 데이터 클래스 상속 (0) | 2022.10.06 |
MySQL: 자동 커밋 플래그가 켜져 있지만 트랜잭션이 롤백될 수 있습니다. (0) | 2022.10.06 |
Java 로깅 출력을 한 줄에 표시하려면 어떻게 해야 합니까? (0) | 2022.10.06 |