给router-view添加key ,破坏复用机制，强制销毁重建

应用场景：路由改变时，改变相应页面

• 当我们在 Vue 的路由中使用 <router-view> 组件时，默认情况下，Vue 会尝试复用已经创建的组件实例，以提高性能和效率。这意味着当我们在不同的路由之间切换时，Vue 会保持之前已经创建的组件实例，并且只更新组件的数据和视图，而不会重新创建组件。

  然而，有些情况下，我们可能需要在路由切换时强制销毁当前的组件实例，并创建一个全新的组件实例。这种情况通常发生在以下两种情况下：

  1. 组件的状态无法正确重置或清除：有些组件可能会在内部维护一些状态或数据，当路由切换时，这些状态或数据可能无法正确地重置或清除。这可能导致在不同的路由之间出现意外的行为或错误。为了解决这个问题，我们可以给 <router-view> 添加一个唯一的 key 属性，以强制销毁当前的组件实例，并创建一个新的组件实例来确保状态的正确性。
  2. 需要重新加载组件的数据或资源：有些组件可能需要在每次路由切换时重新加载数据或资源，以确保显示最新的内容。通过给 <router-view> 添加 key 属性，我们可以强制销毁当前的组件实例，并创建一个新的组件实例来重新加载数据或资源。

  通过给 <router-view> 添加 key 属性，我们告诉 Vue 在每次路由切换时，都要将当前的 key 值与之前的 key 值进行比较。如果两个 key 值不相同，Vue 将会销毁当前的组件实例，并创建一个新的组件实例来替代它。这样可以确保在路由切换时，组件始终是全新的，状态是干净的，数据是最新的。

  需要注意的是，使用 key 属性来破坏复用机制可能会带来一些性能上的损失，因为每次都需要销毁和创建组件实例。因此，应该在确实需要的情况下使用 key 属性，而不是滥用它。

解决办法：使用onBeforeRouteUpdate钩子函数