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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐