vue中如何检测 用户的返回操作

vue中如何检测 用户的返回操作

一，使用 popstate 事件 以下是vue2实例，vue3同理

参考链接

二，使用vue路由监听 + history.state.forward 判断路由操作 （以下是vue3实例，vue2 同理，仅写法不同。

watch($route, (to, from) => {
  // console.log('路由变化了', to.meta, from.meta)
  if (history.state.forward) {    // 当存在history.state.forward 值的时候 用户进行了返回操作  
    thisName.value = 'back'     // 返回的处理逻辑
  } else {
    thisName.value = 'to'  // 其余情况  属于用户进行的其余路由操作 push 等
  }
})

比较推荐第二种，另外注意history.state 对象 记录路由当前信息，上一步，和下一步信息，还是很友好的。
兼容性也不错，移动端pc端均无问题。