Vue监听浏览器前进后退物理返回键(浏览器自带的)

Vue监听浏览器前进后退物理返回键

• 在某些需求下要监听用户物理按键。
• popstate事件只会在页面不跳转的情况下，路由发生变化触发。

created() { // 创建vm实例后执行
    // 浏览器控制按钮前进后退触发函数
    window.addEventListener('popstate', this.popstate, false);
  },
 destroyed() { // 销毁vm组件
  // 避免堆栈溢出，多次创建、多次触发
  window.removeEventListener('popstate', this.popstate, false);
},
 methods: {
	popstate() {
		console.log('发生跳转');
	}
}

• 虽然这样就可以了，只用在popstate中写业务就行了。

• 但是还是要注意，如果不是在keep-alive中可以直接在destoryed()中销毁，避免多次创建，多次调用。

• 如果是在keep-alive中的组件就在deactivated()中销毁。