如果打开，vue 后退按钮应该关闭对话框

Question

我有一个 vue.js 项目。 vue-component 可以创建一个对话框。如果用户按下后退按钮我想关闭这个对话框（如果它是打开的）而不是离开 vue-component。我怎样才能做到这一点？

我试过这个：

beforeRouteLeave(to, from, next) {
    let self = this;
    //dialog is open
    if(self.isShowingDialog){
        //closes the dialog
        self.isShowingDialog = false;
    }
    else {
        //navigates back to previous component
        next();
    }
},

它有效，但如果我第一次打开该组件并且历史记录为空，则无效。在这种情况下，后退按钮退出我的应用程序而不是关闭对话框。

Answer 1

它现在可以按照@Kapcash 的建议与 hashtag/anchor 一起使用。如果我现在按下后退按钮，对话框将被隐藏，我的主要组件不会关闭。

MyComponent.vue:

<StockChooser v-if="showStockChooser" v-model="showStockChooser">

import StockChooser from "./components/StockChooser";
Vue.component('StockChooser', StockChooser)

data() {
  return {
    showStockChooser: false,
  }
},
methods: {
 openDialog: {
   this.showStockChooser = true;
   this.$router.push('#dialogStockChooser')
 }
}

StockChooser.vue:

<v-dialog v-model="show" v-if="show" persistent fullscreen>
  <v-row>
    <v-btn color="red" @click="cancel()" style="width:100%">Cancel</v-btn>
  </v-row>
</v-dialog>

data() {
  return {
    show: false,
  }
},
watch: {
    "$route.hash": {
        handler: function(dialog_id) {
            if(dialog_id === '#dialogStockChooser'){
                this.show = true;
            }
            else {
                this.show = false;
            }
        }, immediate: true
    },
},
methods: {
   cancel(){
     this.$router.push(-1)
   },
}

如果打开，vue 后退按钮应该关闭对话框

vue back button should close dialog if open

javascript

vue.js

vuetify.js

vue-router