javascript - Wie drückt man in vue.js beim Öffnen einer Modalbox-Komponente auf der Seite die Eingabetaste, um die Modalbox verschwinden zu lassen, anstatt zur vorherigen Seite zurückzukehren?

Question

Wie im Titel: Wie drückt man in vue.js beim Öffnen einer Modalbox-Komponente auf der Seite die Eingabetaste (Android-Return-Taste oder Browser-Return-Taste), um die Modalbox auszublenden, anstatt zur vorherigen Seite zurückzukehren?
ps. Können Sie versuchen, Verlaufsdatensätze zu window.history hinzuzufügen, wenn die modale Box geöffnet ist? Wenn möglich, wie man es erreicht

Answer 1

H5页面 不能直接操作系统

Answer 2

如果有办法监听到用户按下返回键 那就在模态框显示的时候禁用返回键的默认事件 改为关闭模态框的方法。

如果要使用历史记录这种办法的话可以试试改变hash值

Answer 3

如果你用了vue-router的话，可以在主的路由视图下面再放一层模态路由视图，然后把模态路由在路由配置文件中配置成主路由视图的子路由就可以了，例如这样：

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

这样的话，在需要模态组件的时候，直接router.push模态组件的路由路径就可以了