v-if (vue.js, vue-router)를 사용하여 템플릿의 뒤로 버튼을 처리 하시겠습니까?

Question

고객 목록을 보여주는 Vue.js 구성 요소가 있습니다. 하나를 클릭하면 개별 고객에 대한 편집보기로 전환됩니다. 이것은 데이터 필드 'editMode'(true 또는 false로 설정)를 테스트하면서 v-if를 사용하여 수행됩니다. 따라서 템플릿에는 목록 테이블과 편집 양식이 있으며 표시되는 것은 'editMode'의 상태에 따라 다릅니다. 사용자가 고객을 클릭하면 editMode를 true로 전환하여 목록을 숨기고 양식을 표시하는 메소드가 호출되며 저장 또는 취소 할 때 editMode를 다시 전환하여 양식을 숨기는 메소드가 호출됩니다. 목록을 표시합니다.

시스템으로 정상적으로 작동하지만 뒤로 버튼을 더 잘 처리해야합니다. 현재 사용자가 고객을 편집하고있을 때 뒤로 버튼을 클릭하면 원래 목록으로 돌아갈 것이라고 자연스럽게 예상 할 수 있지만 그 순간에 어떤 경로로 돌아 왔는지는 알 수 없습니다. 전에부터. 그러나 고객을위한 편집 환경은 다른 경로가 아니며, v-if/v-else를 사용하여 표시되는 템플릿의 다른 부분 일뿐입니다. 뒤로 단추를 원하는대로 작동 시키려면 어떻게합니까? 어떻게 history.pushState를 사용해야합니까? 사용자가 내비게이션 경비원을 사용하는 곳을 제어 할 수는 있지만 이것이 나에게 잘못된 접근 방법 인 것처럼 보입니다.

다음 : Richard Matsen의 제안에 따라, 리팩터링을 많이 필요로하지 않는 또 다른 방법을 생각해 보았습니다. 나는이 잘못된 방향으로 가고있다. 나는 내가 원하는대로 뒤로 (앞으로) 버튼을 사용하기를 원한다면 항상 경로의 관점에서 생각해야한다. 그래서 사용자가리스트로 돌아갈 수있게하려면 편집 상태를 푸시해야한다. 그들이 역사에서 돌아와서 역사에서 벗어날 수 있도록 그러나 다른 경로는 동일한 구성 요소를 사용할 수 있습니다. 사용자가 고객 행을 선택하거나 고객 편집을 완료 할 때 구성 요소 메소드에서 'editMode'를 직접 변경하는 대신 매개 변수와 함께 router.push를 사용하고 '(또는 beforeRouteUpdate 탐색 가드) 매개 변수가 전달 된 경로 변경에 대한 응답으로 'editMode'를 호출합니다. 그렇게하면 동일한 구성 요소를 사용하고 있어도 편집 모드로 전환하는 것이 경로 변경 (사용자가 다시 되돌아 갈 수 있음)입니다. 나는 이것이 작동해야한다고 생각한다. 나는 연극을 할 것이다.

Answer 1

최근에 하위 구성 요소 표시를 v-if에서 하위 라우트로 변경했습니다 (webpack 지연로드의 목적을 위해, 그러나 그것은 다른 이야기입니다).

그것은 이제 템플릿

<div> 
    <router-view></router-view> 
</div> 

이고 하위 경로 정도로

const routes = [ 
    { 
    path: '/maincomponent', name: 'MainComponent', component: MainComponent, 
    children: [{ path: '/subcomponent', name: 'SubComponent', component: SubComponent }] 
    }, 

서브 컴포넌트 경로 방법에서 활성화 같이 구성된

<div> 
    <sub-component v-if="showIt"></sub-component> 
</div> 

로 사용 사용 방법 :

214,및

this.$router.push('maincomponent') 

으로 비활성화 나는 버튼을 다시 페이지를 취할 작동하고 V-하다면 된 하위 구성 요소가 페이지에 '삽입'되어 다시 브라우저를 확인할 수 있습니다.