Vue 单页面应用 另辟蹊径监听物理返回事件

最近公司有新的需求要使用单页面 进行开发，选来选去选择了VUE 因为路由管理起来比较的方便。于是乎开始边学边写。很多坑，

 

最近又有了新的需求 在android环境下 监听到用户点击物理返回事件， 网页应用就是有些麻烦  百度了很久。网上给的方法基本都是使用Xback.js  或者 通过监听“popstate”，并不能完美解决。无奈。只能找其它方法。。由于也是刚上手  对 vue 也不太熟悉。翻API，发现了“导航守卫”，于是乎发现了 “离开守卫”  具体代码如下：

beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)//可以通过在这里写逻辑来处理用户点了物理返回之后的操作
  }
}

离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

 

 

以上   自己记录一下 。