[vuejs] el-dialog 뒤로가기 처리시 하나씩 닫기 by jsfiddle

[HTML]

<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script src="https://unpkg.com/element-ui"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<div id="app">
  <button @click="openDialog('a')">Open Dialog A</button>
  

  <!-- Dialog A -->
  <el-dialog  :visible.sync="dialogA" title="Dialog A">
    <p>Content for Dialog A</p>
    <span slot="footer">
      <el-button @click="closeDialog('a')">Close</el-button>
      <button @click="openDialog('b')">Open Dialog B</button>
    </span>
  </el-dialog>

  <!-- Dialog B -->
  <el-dialog :visible.sync="dialogB" title="Dialog B">
    <p>Content for Dialog B</p>
    <span slot="footer">
      <el-button @click="closeDialog('b')">Close</el-button>
    </span>
  </el-dialog>
</div>

[JAVASCRIPT]

new Vue({
  el: "#app",
  data() {
    return {
      dialogA: false, // A 다이얼로그 상태
      dialogB: false, // B 다이얼로그 상태
    };
  },
  methods: {
    openDialog(dialog) {
      if (dialog === 'a') {
        this.dialogA = true;
        history.pushState({ dialog: 'a' }, null, ''); // A 다이얼로그 상태 추가
      } else if (dialog === 'b') {
        this.dialogB = true;
        history.pushState({ dialog: 'b' }, null, ''); // B 다이얼로그 상태 추가
      }
    },
    closeDialog(dialog) {
      if (dialog === 'a') {
        this.dialogA = false;
      } else if (dialog === 'b') {
        this.dialogB = false;
      }
      history.back(); // 뒤로 가기
    },
    handlePopState(event) {
      const state = event.state;
			console.log(state);
      if (!state) {
        // 모든 다이얼로그 닫기
        this.dialogA = false;
      } else if (state.dialog === 'a') {
        this.dialogB = false;
      }
    },
  },
  mounted() {
    window.addEventListener("popstate", this.handlePopState);
  },
  beforeDestroy() {
    window.removeEventListener("popstate", this.handlePopState);
    // 상태를 초기화하거나 덮어쓰기
    history.replaceState({ dialog: null }, null, '');  
  },
});