javascript - In vue.js, when opening a modal box component on the page, how to press the return key to make the modal box disappear instead of returning to the previous page?

Question

As the title says, in vue.js, when opening a modal box component on the page, how can you press the return key (Android return key or browser return key) to make the modal box disappear instead of returning to the previous page?
ps. Can you try adding history records to window.history when the modal box is opened? If possible, how to implement

Answer 1

H5 page cannot be operated directly

Answer 2

If there is a way to monitor when the user presses the return key, then disable the default event of the return key when the modal box is displayed and close the modal box instead.

If you want to use history recording, you can try changing the hash value

Answer 3

If you use vue-router, you can place another modal routing view below the main routing view, and then configure the modal routing in the routing configuration file as a sub-route of the main routing view, for example like this :

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);
      }
    }]
  }]
}

In this case, when a modal component is needed, just router.push the routing path of the modal component