vue3-解决路由缓存问题-方案一：使用key；方案二：使用onBeforeRouteUpdate

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

问题：一级分类的切换正好满足上面的条件，组件实例复用，导致分类数据无法更新

解决问题的思路：1. 让组件实例不复用，强制销毁重建 2. 监听路由变化，变化之后执行数据更新操作。

方案一：给router-view添加key 

在一级路由里面添加 key

可以用于强制替换一个组件/元素，而不是复用它：

• 在适当的时候触发生命周期钩子
• 触发过渡

 方案二：使用beforeRouteUpdate导航钩子

beforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可

// 获取数据的方法
const getCategory = async (id = route.params.id) => {
  const res = await getCategoryAPI(id)
  categoryData.value = res.result
}


// 目标：路由参数变化的时候，可以把分类数据接口重新发送
// to: 目标路由对象
onBeforeRouteUpdate(to => {
  // console.log('路由变化了')
  // 存在问题：使用最新的路由参数请求最新的分类数据
  console.log(to)
  getCategory(to.params.id)
})

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

路由只有参数变化时，会复用组件实例

2. 俩种方案都可以解决路由缓存问题，如何选择呢？

在意性能问题，选择onBeforeUpdate, 精细化控制 不在意性能问题，选择key，简单粗暴