vue3监听刷新事件后之前路由丢失

在Vue 3中，当我们使用`watch` API或Vue Router中的`beforeRouteUpdate`钩子函数来监听路由的刷新事件时，会遇到之前路由丢失的问题。

在Vue 2中，由于Vue Router是基于组件的，当组件被复用时，其实例不会被销毁，而是被重新使用。这就意味着组件的生命周期钩子函数也会再次调用，同时之前的路由信息也能够保留。

然而，在Vue 3中，由于引入了Composition API，Vue Router的实现方式发生了变化。现在，每次路由发生变化时，相应的组件会被销毁再重新创建，因此之前的路由信息会丢失。

为了解决这个问题，我们可以使用Vue 3提供的`watch` API来监听`$route`对象的变化，并在回调函数中处理之前路由丢失的情况。我们可以通过调用`getCurrentInstance()`函数来获取当前组件实例，并在组件销毁前保存之前的路由信息。

以下是一个示例代码，展示了如何在Vue 3中使用`watch` API来监听路由的刷新事件，并处理之前路由丢失的情况：

import { getCurrentInstance, watch } from 'vue'

export default {
  setup() {
    const currentInstance = getCurrentInstance()
    const previousRoute = ref(null)

    watch(
      () => currentInstance.vnode.props.$route,
      (to, from) => {
        previousRoute.value = from
      }
    )

    // 在组件销毁前保存之前的路由信息
    onBeforeUnmount(() => {
      currentInstance.vnode.props.$router.previousRoute = previousRoute.value
    })

    return {
      previousRoute
    }
  }
}

通过在`watch`的回调函数中将之前的路由信息保存到组件实例的`previousRoute`属性中，然后在组件销毁前将其保存到Vue Router的`previousRoute`属性中，我们就能够在路由刷新时保留之前的路由信息了。

需要注意的是，由于Vue 3中的Composition API是使用函数式编程的方式来组织和管理代码的，因此对于路由的监听和相关处理逻辑，我们需要将其放在`setup`函数中进行处理。