如何在vuejs中单击浏览器后退按钮时关闭模式弹出窗口？

Question

我们使用来自https://github.com/yuche/vue-strap的模态组件。单击浏览器后退按钮时，默认行为将返回到上一个路径，但模式弹出窗口未关闭。如何在浏览器的后退按钮单击事件时更改行为以关闭模式弹出窗口？

Answer 1

这对我有帮助。

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>