vue3开发：解决路由缓存问题,避免用户点击浏览器上的左右返回按钮不调接口的问题

问题描述：在开发vue的项目中，从列表页点击“进入详情”到了详情页，这个时候一切正常，所有接口全部调通。这个时候从详情页点击浏览器的左右箭头进入列表页，然后再通过浏览器的左右按钮进入详情，反复切换，发现进入详情页面的部分接口不会调取了。

1.之前不知道是什么原因导致的，就在watchEffect监听里面调接口，然后渲染页面。

2.后来想起来以前开发遇到过类似的问题，使用onBeforeRouteUpdat导航钩子解决了。
beforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可

3.后来就查beforeRouteUpdate钩子函数在vue3中的用法，遇到了一篇文章：vue3-解决路由缓存问题-方案一：使用key；方案二：使用onBeforeRouteUpdate，看到了另一种解决方式：router-view添加key。

4.我看了一下项目的代码，发现使用了router-view，也添加了key，但是key赋值不对,就是说路由切换的时候，key值一直没有更新。

5.按照参考链接的写法：

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

6.更新了router-view上的key，点击浏览器上的左右按钮所有的接口都会调取了，上述的bug就是路由缓存导致的。