Vuejs: 루트 변경 전 확인 대화 상자 표시

Vuejs: 루트 변경 전 확인 대화 상자 표시

vueJS 프로젝트에서 현재 경로가 변경되기 전에 확인 대화 상자를 표시하려고 합니다.

네, 다음 목적 루트로 리다이렉트 할 필요가 있습니다.그렇지 않으면 같은 루트로 리다이렉트 할 수 없습니다.

어떻게 해야 하는지 알아?

잘 부탁드립니다.

구성 요소 내 가드를 사용할 수 있습니다. beforeRouteLeavehttps://router.vuejs.org/en/advanced/navigation-guards.html 를 참조해 주세요.

데모: https://codesandbox.io/s/jzr5nojn39 (홈 페이지 1, 2 페이지 사이를 이동해 보십시오)

샘플 코드(vuejs-dialog를 확인 대화 상자로 사용):

    beforeRouteLeave (to, from, next) {
        this.$dialog.confirm('Do you want to proceed?')
        .then(function () {
            next();
        })
        .catch(function () {
            next(false);
        });
    }

계속 진행해야 하는 경우next().

리다이렉션을 취소해야 할 경우next(false).

승인된 답변은 vuejs-dialog를 사용하여 수행하는 방법을 보여 줍니다.그러나 이 라이브러리를 사용하지 않으려면 아래에서 확인하십시오.

다음과 같은 세 가지 옵션이 있는 대화 상자가 있다고 가정합니다.

대화상자를 닫다=> 콜closeDialog()같은 페이지를 유지하다

변경 저장 => 콜saveChanges()변경 내용을 저장하고 다른 곳으로 이동

변경 파기 => 콜discardChanges()변경 내용을 저장하지 않고 이동

  data: () => ({
    to: null,
    showDialog: false
  }),

  beforeRouteLeave(to, from, next) {
    if (this.to) {
      next();
    } else {
      this.to = to;
      this.showDialog = true;
    }
  },

  methods: {
    closeDialog() {
      this.showDialog = false;
      this.to = null;
    },

    saveChanges() {
      // add code to save changes here
      this.showDialog = false;
      this.$router.push(this.to);
    },

    discardChanges() {
      this.showDialog = false;
      this.$router.push(this.to);
    }
  }

코드 및 상자에서 실제 작업 보기

테이크어웨이 여기서 중요한 포인트는 beforeRouteLeave 네비게이션 가드입니다.여기서 사용자는 이 기능을 사용할 수 없습니다.to데이터의 속성이 null입니다.null일 수 없는 유일한 경우는 사용자가 대화상자에서 저장 또는 삭제 버튼을 클릭하는 경우입니다.

VueJ에는 다음과 같은 컴포넌트 내 내비게이션 가드가 있습니다.beforeRouteUpdate그리고.beforeRouteLeave

beforeRouteEnter (to, from, next) {
  // called before the route that renders this component is confirmed.
  // does NOT have access to `this` component instance,
  // because it has not been created yet when this guard is called!
},
...
beforeRouteLeave (to, from, next) {
  // called when the route that renders this component is about to
  // be navigated away from.
  // has access to `this` component instance.
}

다음 코드가 유효합니다.

 <v-btn @click="deleteDialog = true">Delete</v-btn>
      <v-dialog v-model="deleteDialog" max-width="500px">
       <v-card>
               <v-card-title style="font-size:20px" >Are you sure you want to archive?</v-card-title>
               <v-card-actions>
                   <v-spacer></v-spacer>
                   <v-btn color="red" style="font-size:15px" flat @click.native="deleteDialog = false">No</v-btn>
                   <v-btn color="green" style="font-size:15px" flat @click.native="deleteItem">Yes</v-btn>
               </v-card-actions>
           </v-card>
       </v-dialog>

언급URL : https://stackoverflow.com/questions/50094129/vuejs-show-confirmation-dialog-before-route-change