手机物理键

需求：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));
		}
	},
},

来自：这里