【VUE】监听页面返回或移动端物理返回按钮键

2018-10-12  本文已影响3504人  北极星丶超帅的

有一次在修改别人的代码时,发现页面一进来会加载两次,导致要返回到上一页面还要点两次才能返回,找了原因,发现原来是axios发送了两次请求(一次为请求方法为option,一次为正常请求),具体解释请点查看,我一般用的是代理跨域,第一次遇到这种跨域处理,由于技术过渣不知道怎么改,只好想办法控制返回事件实现点击一次返回上一级(就是这么强硬 (~O~))

//unit.js
// 存储当前历史记录点,实现控制手机物理返回键的按钮事件
export const pushHistory = () => {
  let state = {
    title: '',
    url: ''
  }
  window.history.pushState(state, state.title, state.url)
}
//index.vue
<script>
import { pushHistory } from '@/misc/utils' // 引入工具类
export default {
 mounted () {
    pushHistory()
    // 监听历史记录点, 添加返回事件监听
    window.onpopstate = () => {
      this.$router.push(...)  //输入要返回的上一级路由地址
    }
  }
}
</script>
上一篇 下一篇

猜你喜欢

热点阅读