Vue 부모 구성 요소 의 하위 경로 전환 후 현재 탐색 active 스타일 이 사라 지 는 문 제 를 해결 합 니 다.
뉴스 클릭 을 마음대로 선택 하면 하위 경로 로 이동 합 니 다.localhost:8083/\#/new/new Detail.이때 뉴스 정보의 주 경로 인 style 스타일 이 사라 지 는 문제 가 발생 합 니 다.다음 그림:
style 코드:
.router-link-exact-active{
color: #8fc526!important;
border-top: 4px solid #8fc526!important;
}
router.js 코드:
{
path: '/new',
name: 'new',
component: news,
children: [
{
path: '/new/newDetail',
name: 'newDetail',
component: newsDetail
}
]
}
해결 방안:style 프로젝트 를 아래 로 바 꾸 면 됩 니 다.
.router-link-active{
color: #8fc526!important;
border-top: 4px solid #8fc526!important;
}
클래스 이름 은 router-link-active 로 설정 되 어 있 으 며,하위 경로 로 이동 하 더 라 도 주 경로 의 스타일 문제 에 영향 을 주지 않 습 니 다.추가 지식:element-ui 에서 el-menu 구성 요 소 를 vue-router 모드 로 페이지 를 새로 고 친 후 default-active 속성 이 현재 경로 페이지 와 일치 하지 않 는 문 제 를 해결 하 는 방법
해결 방법 은 menu 의 default-active 바 인 딩 route.path 입 니 다.
모양:
렌 더 링 menu 는 현재 path 설정 을 기본 값-active 로 읽 습 니 다.
위 와 같은 Vue 에서 부모 구성 요소 의 하위 경로 전환 을 해결 한 후 현재 네 비게 이 션 active 스타일 이 사라 지 는 문 제 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.