在vue中，如何处理手机物理键返回

最新推荐文章于 2024-07-08 13:45:00 发布

四岁半儿

最新推荐文章于 2024-07-08 13:45:00 发布

阅读量2.4k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45423865/article/details/124120141

版权

这篇博客介绍了如何在H5页面中实现用户信息的保存，并监听手机物理返回键，确保用户信息在页面返回时能被保留在本地缓存。通过利用浏览器的popstate事件和localStroage，当用户离开页面时，信息会被自动保存，当用户返回时，信息能够重新加载。此外，还详细说明了如何在页面销毁时解除事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：h5登记用户信息页面，用户返回，信息能否保存下来
手机物理键返回时，进行操作，将信息保存到本地缓存
1.mounted生命周期挂载，完成后，判断浏览器是否支持popstate

mounted() {
	// 如果支持 popstate 一般移动端都支持了
	if (window.history && window.history.pushState) {
		// 往历史记录里面添加一条新的当前页面的url
	    history.pushState(null, null, document.URL);
		// 给 popstate 绑定一个方法 监听页面刷新
	    window.addEventListener('popstate', this.fun, false);//false阻止默认事件
	}
	// 获取本地储存的信息
	let addCarInfo = JSON.parse(localStorage.getItem("addCarInfo"));
	if(addCarInfo){
		if(addCarInfo.number){
			this.number = addCarInfo.number;
		}
		if(addCarInfo.car_type){
			this.car_type = addCarInfo.car_type;
		}
	}
}

2.在页面销毁时候，取消默认事件，否则vue路由也会被监听

destroyed(){
    window.removeEventListener('popstate', this.fun, false);//false阻止默认事件
},

3.将监听操作写在methods里面，removeEventListener取消监听内容必须跟开启监听保持一致，所以函数拿到methods里面写

methods:{
    // 自己物理返回键的函数
	fun(){
	    console.log("监听到了");
		if(this.$route.query.car_record_id === undefined){
			let addCarInfo = {
				number : this.number,
				car_type : this.car_type
			}
			localStorage.setItem('addCarInfo',JSON.stringify(addCarInfo));
		}
	},
},