vue离开当前页面切换到其他页面之前触发的方法，和创建及销毁的方法

在Vue中，当需要在离开当前页面切换到其他页面之前执行某些操作时，可以使用特定的路由守卫和生命周期钩子函数。以下是一些关键的方法和它们的用途：

离开当前页面触发的方法

1. beforeRouteLeave 守卫：这是一个导航守卫，会在当前组件即将离开时被调用。你可以在这里执行一些清理操作，比如取消未完成的请求，以避免影响下一个页面的数据加载。
   • "在Vue中，当组件离开当前页面时，可以使用 beforeRouteLeave 守卫来触发相应的操作。这个守卫会在当前组件即将离开时被调用，可以在这里执行一些清理操作..."4
2. AbortController 和 CancelToken：这些是用于取消正在进行的Axios请求的方法，以确保在页面切换时不会影响新页面的数据加载。
   • "使用 AbortController 取消 axios 请求" 和 "使用 CancelToken 取消 axios 请求" 可以确保在离开页面时丢弃所有添加了 signal 的请求1。

创建及销毁的方法

1. beforeRouteEnter 钩子函数：这个钩子函数在切换进入当前路由之前被调用，但它不能直接访问this，因为实例还未被创建。它通常用于设置一些初始状态或执行一些在组件实例化之前需要完成的操作。

   • "切换进入当前路由之前的钩子函数 beforeRouteEnter"6。

2. 组件的生命周期钩子：Vue组件有多个生命周期钩子，如created、mounted、beforeDestroy和destroyed。这些钩子可以在组件的不同阶段执行相应的逻辑。

   • 例如，created钩子在实例创建之后被调用，而beforeDestroy在Vue实例销毁之前被调用，适合进行一些清理工作。

3. 页面的前进后退处理：在Vue 3中，使用<keep-alive>可以解决页面前进后退时的刷新问题，而onActivated方法可以在页面重新激活时刷新数据。

   • "使用解决了这个问题，有些页面必须得进入之后刷新数据，所以又使用了onActivated方法"8。

4. visibilitychange 和 onblur 事件：这些事件可以用于监听用户切换出当前页面的情况，visibilitychange事件在浏览器标签页失去或获得可见性时触发，而onblur事件在窗口失去焦点时触发。

   • "浅析vue实现监听切出当前页面的两种方法：visibilitychange事件和onblur事件"5。

通过这些方法，你可以在Vue应用中有效地管理页面的离开、进入、创建和销毁过程，确保应用的流畅性和数据的一致性。