vue3路由缓存问题

今天在写vue3项目中遇到这样一个问题？在页面路由的路径参数或者query参数发生变化时，需要重新请求后台数据

但是vue3性能考虑，组件参数变化，会复用整个组件实例(不会引起组件实例销毁与挂载)
此时，我想到运用watch监听属性：

<!-- 监听参数变化发多次请求 -->
watch(() => router.params.id, () => {
  
})

也是成功解决了问题。除此之外还有以下两种解决办法:
1.强制不让路由缓存（不推荐）

<router-view :key="$route.fullPath"></router-view>

这样写为什么路由不缓存呢？这里涉及到<router-vive>中key的作用，当key相同时复用组件（默认不写key一样），当key不一样时，组件被强制不复用。这里$route.fullPath可拿到整个路劲。扩展：

<!-- 路径：http://127.0.0.1:3000/home?a=1 -->
console.log(route.path)// 输出 /home
console.log(route.fullPath)// 输出 /home?a=1

所以路径参数或者query参数发生变化时，说明key值不一样，组件被强制不复用，必将引起组件的销毁与挂载
2.onBeforeRouteUpdater（推荐）
这是我尤为推荐的方法，vue官方解释的也很清楚，当一个组件复用时，传递的参数发生变化就会触发这个钩子函数**

onBeforeRouteUpdate((to) => {
 // 请求数据的接口函数
  getData(to.params.id)
})