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模態元件的路由路徑就可以了