浏览器返回禁用，浏览器页签更改刷新列表

vue 页面返回触发事件 原文：https://www.cnblogs.com/brillant/p/15400973.html

mounted（）{

	// 禁用浏览器返回键

　　history.pushState(null, null, document.URL);

　　window.addEventListener('popstate', this.disableBrowserBack);
}
methods:{
	disableBrowserBack(){  
      alert("无法返回，请提交")
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', this.disableBrowserBack);
    }
}
如果在以上方法中不再加

history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.disableBrowserBack);
则页面提示一次后再点击返回则依然会返回，如果添加以上代码，多次点击返回也可以

vue中使用visibilitychange事件来获取页面当前可见性 原文：http://www.syrr.cn/news/572.html

前言
在系统中，如果有打开新页面进行相关操作，若是有关联操作就需要通过判断页面的可见性来进行后绪的操作

一、触发visibilitychange变更的情况
页面的可见性有三个层面

页面可见时，用户关闭 Tab 页或浏览器窗口。
页面可见时，用户在当前窗口前往另一个页面。
页面不可见时，用户或系统关闭浏览器窗口。
这三种情况，都会触发visibilitychange事件。前两种情况，该事件在用户离开页面时触发；最后一种情况，该事件在页面从可见状态变为不可见状态时触发。

二、 hidden与visibilityState
hidden与visibilityState 都是 document对象的属性

document.visibilityState
返回一个字符串，表示页面当前的可见性状态，共有三个可能的值。

hidden：页面彻底不可见。
visible：页面至少一部分可见。
prerender：页面即将或正在渲染，处于不可见状态。
只要页面可见，其值就是true,什么情况下是hidden呢？

浏览器最小化。
浏览器没有最小化，但是当前页面切换成了背景页。
浏览器将要卸载（unload）页面。
操作系统触发锁屏屏幕。
document.hidden
只读，返回一个布尔值，表示当前页面是否可见
当document.visibilityState属性返回visible时，document.hidden属性返回false；其他情况下，都返回true
推荐使用document.visibilityState来判断页面的可见性

三、visibilitychange 事件
只要document.visibilityState属性发生变化，就会触发visibilitychange事件。因此，可以通过监听这个事件（通过document.addEventListener()方法或document.onvisibilitychange属性），跟踪页面可见性的变化

四、代码示例

<template>
	<div ref="refDV">
		测试visibilitychange
		<el-button type="primary" @click="handleAddListener">启用</el-button>
		<el-button type="danger" @click="handleremoveListener">销毁</el-button>
	</div>
</template>

<script>

	function gethiddenStatus() {
		var isHidden = document.hidden;
		if (isHidden) { 
			// 失去焦点
			document.title = '小主，快回来';
			console.log('visibilitychange--lost', document.visibilityState);
		} else {
			// 未失去焦点
			document.title = '激活窗户';
			console.log('visibilitychange--com', document.visibilityState);
		}
    }
export default {
	mounted() {
		this.handleAddListener();
	},
	destroyed() {
		this.handleremoveListener();
	},
	methods: { 
		// 开启
		handleAddListener() {
			document.addEventListener('visibilitychange', gethiddenStatus, true);
		},
		// 手动销毁
		handleremoveListener() {
			document.removeEventListener('visibilitychange', gethiddenStatus, true);}
		}
	};
</script>

销毁事件后，不再触发visibilitychange

监听浏览器（坑，没触发。）

// pay.vue
methods: {
  handleWinFocus() {
    alert('you are in page now');
  },
},
ready() {
  window.addEventListener('focus', this.handleWinFocus);
},
beforeDestroy() {
  window.removeEventListener('focus', this.handleWinFocus);
},