使用onBeforeRouteUpdate解决路由缓存问题

问题描述：

点击标题跳转到新页面，如果标题的位置需要向下滚动才可以找到，页面停留的位置不在顶部，那么新跳转的页面位置和之前的位置一样。

原因：

当用vue3开发页面的时候，需要对不同页面的组件进行路由跳转，相同的组件实例将会被复用。因为这些路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过这也意味着组件的生命周期钩子不会被调用。

onBeforeRouteUpdate(async (to) => {
  let scrollDom = document.getElementById('settlePageId')
  scrollDom?.scrollIntoView(true)
  getActive(to?.query.settleName?.toString())
})

路由缓存问题产生的原因是什么？

路由只有参数变化时，会复用组件实例.在回调中执行需要数据更新的业务逻辑即可

解决：

beforeRouteUpdate钩子函数可以在每次路由更新之前执行