javascript - 在vue.js中，在页面打开一个模态框组件，如何做到按返回键让模态框消失，而不是返回上一个页面？

Question

如题，在vue.js中，在页面打开一个模态框组件，如何做到按返回键（安卓返回键或浏览器返回键）让模态框消失，而不是返回上一个页面？
ps.能不能尝试当打开模态框的时候往window.history添加历史记录？如果可以，该如何实现

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模态组件的路由路径就可以了