강제 새로 고침 후 경로가 변경되면 Vuetify 하단 탐색이 활성 상태를 제거할 수 없습니다.

Question

내 앱에서는 다음과 같은 하단 탐색 구성요소를 설정했습니다.

으아아아

이 기능은 훌륭하게 작동하며 예상대로 내 앱 내에서 탐색하는 데 사용할 수 있습니다. 하단 탐색의 버튼을 클릭하면 버튼 상태가 업데이트되어 활성(기본 색상)으로 표시됩니다.

내 경로는 다음과 같이 정의됩니다.

으아아아

하단 탐색의 일부는 아니지만 내 앱의 제목 표시줄에 다음과 같이 정의되는 추가 경로 /settings도 있습니다.

으아아아

설정 버튼/라우팅 링크는 하단 탐색의 일부가 아니기 때문에 설정 버튼을 클릭하면 하단 탐색 버튼의 활성 상태가 비활성화됩니다. 이는 하단 탐색의 일부가 아니기 때문에 올바른 것입니다.

이상한 동작이 발생하는 위치는 다음과 같습니다.

하단 탐색에 정의된 경로에 있는 경우 페이지를 강제로 새로고침하면 올바른 위치로 새로고침됩니다. 여기에서 설정 버튼을 클릭하면 라우터에 설정이 표시되지만 하단 탐색의 이전 상태는 여전히 활성 상태로 표시됩니다. 이는 강제 새로 고침 시에만 발생합니다. 하단 탐색 경로를 선택한 다음 설정으로 이동하면 하단 탐색 버튼에서 활성 상태가 제거됩니다.

조사 결과 라우팅 링크의 exact속성 문제일 수도 있다고 생각했는데 별 차이가 없는 것 같습니다.

또한 하단 탐색 모음을 작은 크기 이하로 표시하도록 중단점을 설정했습니다. 창을 늘려 하단 탐색 모음을 숨긴 다음 창을 축소하여 다시 표시하면 구성 요소가 다시 표시될 때 올바른 상태가 됩니다.

Answer 1

페이지를 다시 로드하는 것이 이 오류를 재현하는 유일한 방법은 아닙니다. 탐색 그룹의 버튼은 VItemGroup逻辑和VBtn的routable mixin进行切换。您可以通过点击任何导航按钮两次并在此之后路由到/settings来复制该问题。如果您检查处于该状态的元素，则活动类v-btn--active会重复3次。路由到另一个页面只会删除v-btn--active v-btn--active의 정확한 일치를 전달하는 것처럼 보이지만 세 번째 버튼은 요소에 남아 있습니다.

분명히 이는 예상된 동작이 아닙니다.

하지만 해결책은 매우 간단합니다. 각 버튼을 active-class属性设置为除'v-btn--active' 이외의 값으로 설정하면 문제가 해결됩니다.

예를 들면:

으아악