CODEWITHSUNDEEP
vue.jsvue-router
raven.zuo
raven.zuo

Reputation: 111

how to close modal popup when browser back button is clicked in vuejs?

We make use of modal component from https://github.com/yuche/vue-strap. When browser back button is clicked, the default behavior is back to previous path but the modal popup isn't closed. How can I change the behavior to close the modal popup upon browser's back button click event?

Upvotes: 3

Views: 3776

Answers (1)

George Joseph
George Joseph

Reputation: 29

This helped me.

https://jessarcher.com/blog/closing-modals-with-the-back-button-in-a-vue-spa/

created() {
  const backButtonRouteGuard = this.$router.beforeEach((to, from, next) => {

    if (from.name == 'menu') {
      /* Blocking back button in menu route */
      next(false);
      
      this.yourCallBackMethod()
    } else {
      /* allowing all other routes*/
      next(true);
    }
  });

  this.$once('hook:destroyed', () => {
    backButtonRouteGuard();
  });
},

methods: {
    yourCallBackMethod() {
      // Go to the previous step, or close the modal
    }
},
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Upvotes: 2

Related Questions