文章目录
背景跳转方式：全部使用方式一:push全部使用方式二:replace期待方式结论错误1错误2错误3错误3.1其它最后来个小工具vue-router push的实现window.history API简要了解背景
原生混合h5开发，一个很常规的操作： 从原生进入webview， 页面1是列表页， 点击搜索跳转页面2-搜索页， 搜索成功后跳转页面1(携带param参数)。
跳转方式：
this.$router.push()this.$router.replace()全部使用方式一:push
router栈里面： 1 > 2 > 1。 此时返回键依次出栈。
全部使用方式二:replace
router栈里面： 1 （或者2）， 只有一条记录，此时返回键直接退出webview了，很不友好。
期待方式
路由栈:1>2>1>2>1>2>1>2 。 无论栈有多深，在页面1返回键直接退出webview，在页面二返回键回退一层路由。
结论
试过四种写法无法达成结果， 建议直接让原生屏蔽返回键。没救了。
错误1
这种不行， 所有页面侧滑都会直接触发同一个 handleback函数。remove应该不生效。
// 返回键拦截, 触发后销毁window.addEventListener('popstate', ()=>{this.handleBack()window.removeEventListener('popstate', this.handleBack)console.log('去除eventL' ,window)})
错误2
显然，抱着蒙一蒙的心态。
let that = thiswindow.addEventListener('popstate', function (){that.handleBack()window.removeEventListener('popstate', this)})
错误3
最有希望成功的，然而没卵用。destoryed生命周期里并没有销毁listener， 在别的页面侧滑直接退出webview了
created(){// 返回键拦截, 触发后销毁console.log('添加eventL' ,window)window.addEventListener('popstate', this.handleNativeBack)},destroyed() {console.log('去除eventL' ,window)window.removeEventListener('popstate', this.handleNativeBack )},
错误3.1
灵感源于 Xback.js这个库，然而也没有卵用。
// 处理安卓实体返回键，侧滑export default function (){let STATE = '_android_back';let handlerList = [];return function () {// 触发一次popstate方法，则调用最新处理方法const handlePopstate = function () {console.log('this', this)if(handlerList.length > 0){let handle = handlerList.pop() ;handle && handle();}};// 清楚事件const clean = function () {window.removeEventListener('popstate', handlePopstate)}// 通过调用listen方法添加处理方法const listen = function (handle) {handlerList.push(handle);};// 通过调用push方法，新增一条历史记录，并添加对应处理方法const push = function (state, handle) {if (handle) {history.pushState(state, null, location.href);handle && handlerList.push(handle);}};// 通过调用 history.pushState() 方法添加一条历史记录history.pushState(STATE, null, location.href);// 监听 popstate 事件，当点击Android物理返回键时，会触发该事件window.addEventListener('popstate', handlePopstate);console.log('what is handles', handlerList)}}
其它
window.addEventListener(‘popstate’, handlePopstate); 多个页面执行这玩意儿会添加n个事件到popstate上，不是一个覆盖另一个。
最后来个小工具
判断数字输入框： 温度范围20到50， 可以为整数，一位小数，两位小数。比如36， 36.1 ， 36.12// 判断温度范围, 可以配合van-field使用export const tempValidator = (val)=>{return val >=20 && val<=50 && (val.toString().indexOf('.') === -1 || (val.toString().indexOf('.') >0 && val.toString().split('.')[1].length < 3 ) )}
vue-router push的实现
function pushState (url, replace) {// try...catch the pushState call to get around Safari// DOM Exception 18 where it limits to 100 pushState callsvar history = window.historytry {if (replace) {history.replaceState({key: _key }, '', url)} else {_key = genKey()history.pushState({key: _key }, '', url)}saveScrollPosition(_key)} catch (e) {window.location[replace ? 'replace' : 'assign'](url)}}
