vue3通过监听路由变化完成刷新

Vue3通过`watch` API和`router`实例的`currentRoute`属性来监听路由变化并完成刷新。

在Vue3中，我们可以使用`watch` API来监听特定的数据变化，并在数据变化时执行相应的操作。而在Vue3中，`router`实例的`currentRoute`属性表示当前的路由信息，我们可以利用`watch` API来监听这个属性的变化。

具体来说，我们可以在Vue组件的`setup()`函数中使用`watch` API来监听`router.currentRoute`，并在回调函数中执行刷新操作。例如，我们可以创建一个新的Vue组件来监听路由变化并在路由变化时执行刷新：

import { onBeforeMount, onUnmounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    const handleRouteChange = () => {
      // 执行刷新操作
      console.log('路由变化，执行刷新操作')
    }

    onBeforeMount(() => {
      // 在组件挂载前开始监听路由变化
      watch(() => route.currentRoute, handleRouteChange)
    })

    onUnmounted(() => {
      // 在组件卸载时停止监听路由变化
      unwatch(handleRouteChange)
    })
  }
}

上述代码中，我们使用`useRouter`和`useRoute`来获取`router`实例和当前路由信息。然后，在组件挂载前使用`watch` API来监听`route.currentRoute`的变化，当路由变化时会执行回调函数`handleRouteChange`中的刷新操作。在组件卸载时，我们可以通过`unwatch`函数来停止监听。

这样，当Vue3的路由发生变化时，我们就可以监听到路由变化并执行相应的刷新操作了。