vue中监听返回键问题

问题：在项目中，我们常常有需求，当用户在填写表单时，点击返回的时候，我们希望加一个弹窗，确认离开吗，确认将保存为草稿

解决方案：利用 H5的 pushstate（个人理解为增加页面栈）特性与onpopup事件

分析：pushstate 从该方法名我们可以知道 是增加某种状态，会为history对象的length增加长度, 点击返回键的时候会触发onpopup事件（可以联想到 pop其实是数组删除的最后一个元素，符合  ‘栈' 的思想）；

onpopup触发返回上一页，而 pushstate仅仅是从url上进行了改变，不会校验url的内容，页面不会改变，加入当前页面为 xxx/b.html,此时pushState(null,null,'a.html')，可以发现 url变了，而页面的内容并没有改变，我们可以通过这来造成一种无法返回的假象

实施：

//注意：Dialog是一款弹窗的插件
mounted: function() {
//当前页面挂载的时候调用 返回键的监听方法
this.listeningBack()
}
 //当页面销毁的时候我们也要将事件监听销毁，以免影响其他内容
 destroyed:function(){
  window.onpopstate = null
},
methods:{
//监听返回键
listeningBack() {
var that = this;//window.onpopstate方法指向window,所以要储存一下当前的vue实例
let route = '上一页'；//根据业务逻辑的上一页决定
window.onpopstate = function() {
//将当前页面window.location.href 放入页面栈当中
history.pushState({}, null, window.location.href);
Dialog.alert({
title: '标题',
message: '确认返回吗，你所填写的内容将保存为草稿'
}).then(() => {
that.$router.push({
path:route
})
}).catch(
console.log('取消返回，留在当前页面')
);
}
},

}

总结

以上所述是小编给大家介绍的vue中监听返回键问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)

    [注]:popstate 事件 a.当活动历史记录条目更改时,将触发popstate事件. b.如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本. c.需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件. d.只有在做出浏览器动作时,才会触发该事件,如用

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

  • vuejs中监听窗口关闭和窗口刷新事件的方法

    1.使用window.onunload之类的API window.onbeforeunload = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提示'; }; 2.在生命周期钩子中注册监听事件 methods: { beforeun

  • 解决Vue2.0 watch对象属性变化监听不到的问题

    问题 很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性.发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了. 解决 为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除. 请参照https://v1-cn.vuejs.org/guide/reactivity.html 解决方式: 通过vue的this.$set(object, key, value)方法 通过Object.assign()

  • vue中的watch监听数据变化及watch中各属性的详解

    首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep

  • vuex提交state&&实时监听state数据的改变方法

    项目背景 websocket长连接 根据指示进行四个页面之间的跳转,在各页面执行相应的逻辑处理. 项目搭建结构如下所示: 解决方案 在四个页面外面写个父页面,router路径如下所示: vuex \src\store\mutations.js //存储到vuex里面 [WEBSOCKETDATA](state,socketdata){ state.socketData=null;//vue监听不到数组的改变 所以清空重置一下就好咯 state.socketData=socketdata } \s

  • vue-cli监听组件加载完成的方法

    在使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成后再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能. 1.安装vuex npm install vuex --save 2.在项目目录下找到store.js文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //监听nav模块加载完 const m_classifyone = { state: { count:0 }, mutations:

  • vue中监听返回键问题

    问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpopup事件 分析:pushstate 从该方法名我们可以知道 是增加某种状态,会为history对象的length增加长度, 点击返回键的时候会触发onpopup事件(可以联想到 pop其实是数组删除的最后一个元素,符合  '栈' 的思想): onpopup触发返回上一页,而 pushstate仅仅是

  • Android onKeyDown监听返回键无效的解决办法

     Android onKeyDown监听返回键无效的解决办法 当我们的Activity继承了TabActivity,在该类中重写onKeyDown是监听不到返回键的, 具体解决方法如下: 重写dispatchKeyEvent /** * 退出 */ @Override public boolean dispatchKeyEvent(KeyEvent event) { if (event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getAc

  • Android开发实现Fragment监听返回键事件功能的方法

    本文实例讲述了Android开发实现Fragment监听返回键事件功能的方法.分享给大家供大家参考,具体如下: 前面的文章Android开发教程之Fragment定义.创建与使用方法详细讲述了Fragment的基本概念与用法.这里再来分析一下Fragment监听返回键事件的具体应用. 背景 项目要求用户注册成功后进入修改个人资料的页面,且不允许返回到上一个页面,资料修改完成后结束当前页面,进入APP主页. 由于是使用多个Fragment完成注册流程,就需要Fragment监听用户点击手机上的返回

  • React和Vue中监听变量变化的方法

    React 中 本地调试React代码的方法 yarn build 场景 假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state. 16之前 在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后 在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听, getDerivedStateFromProps 可以返回 null 或者一个对象,如果

  • Android Fragment监听返回键的一种合理方式

    开场 以下场景为杜撰: 产品经理:"小罗,这个信息发送界面,如果用户输入了内容,点击返回键的时候,要先询问用户是否保存草稿箱哈". 小罗:"收到,这问题简单." 说完小罗就准备着手处理,然后却发现信息编辑界面是一个Fragment,然而Fragment并没有提供返回键点击的直接处理:小罗虽菜,但是摸鱼也摸了些年头了,这问题难不倒小罗. 小罗心想,反正Activity提供了onBackPressed方法,再不济的情况把这个操作分发到Fragment中去就好,可是对于处

  • 解决vue中监听input只能输入数字及英文或者其他情况的问题

    如下所示: 1. <input placeholder="请输入条形码" class="disPriceStyle" v-model = 'searcBarCode'></input>. (只能输入数字,英文) <input placeholder="请输入商品条形码" class="disPriceStyle" maxlength="20" v-model = 'search

  • vue中监听路由参数的变化及方法

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数. 可以添加路由监听: watch: { $route: { handler() { this.id = this.$route.query.id; this.get

  • vue中监听input框获取焦点及失去焦点的问题

    vue中监听input框获取焦点及失去焦点的问题

    目录 一.背景 二.首先是正宗的监听事件的写法 1.html代码 2.JS部分 三.为什么上次监听焦点事件失败呢 1.不好用的原因 2.新增指令的方法 一.背景 博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况.当时百思不得其解.今天又在写vue页面的时候,突然@blur和@focus又好用了.emmmm,看来这部分值得一战. 二.首先是正宗的监听事件的写法 1.html代码 //这是html的输入框.定义了一个获取焦点,失去焦点的方法 <input pla

  • Android中监听Home键的4种方法总结

    昨天需要处理一个问题,需要监听home键.最开始想到使用onKeydonwn这个方法.但是发现home不能这样处理,onKeydonwn可以处理菜单键和back键,但home不能.因为home键是系统键,情况特殊一些. 看了一下网上的资料,说下面的方法可以.(其实不行) 复制代码 代码如下: @Override     public void onAttachedToWindow() {         // TODO Auto-generated method stub         Log

  • vue项目中监听手机物理返回键的实现

    背景:项目中有一个场景要监听android手机物理返回键,但是app和js的中间件又没提供这个事件的监听,只能百度纯js实现了 第一步: xback.js ;!function(pkg, undefined){ var STATE = 'x-back'; var element; var onPopState = function(event){ event.state === STATE && fire(); } var record = function(state){ history

随机推荐