javascript - Dans vue.js, lors de l'ouverture d'un composant de boîte modale sur la page, comment appuyer sur la touche retour pour faire disparaître la boîte modale au lieu de revenir à la page précédente ?

Question

Comme le titre, dans vue.js, lors de l'ouverture d'un composant de boîte modale sur la page, comment appuyer sur la touche retour (touche retour Android ou touche retour du navigateur) pour faire disparaître la boîte modale au lieu de revenir à la page précédente ?
ps. Pouvez-vous essayer d'ajouter des enregistrements d'historique à window.history lorsque la boîte modale est ouverte ? Si possible, comment y parvenir

Answer 1

La page H5 ne peut pas être utilisée directement

Answer 2

S'il existe un moyen de surveiller le moment où l'utilisateur appuie sur la touche retour, désactivez l'événement par défaut de la touche retour lorsque la boîte modale est affichée et fermez la boîte modale à la place.

Si vous souhaitez utiliser l'enregistrement de l'historique, vous pouvez essayer de modifier la valeur de hachage

Answer 3

Si vous utilisez vue-router, vous pouvez placer une autre vue de routage modal sous la vue de routage principale, puis configurer le routage modal dans le fichier de configuration de routage en tant que sous-route de la vue de routage principale, par exemple :

foo.vue
<template>
  <router-view></router-view>
</template>

modal.vue
<template>
  <router-view></router-view>
</template>

route.js(vue-router2)
module.exports = {
  routes: [{
    path: '/foo',
    name: 'foo',
    component(resolve) {
      require(['foo.vue'], resolve);
    },
    children: [{
      name: 'modal',
      path: 'modal',
      component(resolve) {
        require(['modal.vue'], resolve);
      }
    }]
  }]
}

Dans ce cas, lorsqu'un composant modal est nécessaire, il suffit de router.push le chemin de routage du composant modal.