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()中销毁。


版权声明:本文为qq_45593068原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。