前端学习记录：解决路由缓存问题

问题描述：响应路由参数的变化，使用带有参数的路由时需要注意的是，当用户从 /users/johnoy 导航到 /users/jolyne 时，相同的组件实例将会被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。

简单来说就是，响应路由只有参数变化，而且这些路由渲染的组件都是同一个，只是组件请求并绑定的数据不一样。这样的话用户从 /users/johnoy 导航到 /users/jolyne 时，这个组件就不会被销毁，而是一直存在，所以它的onMounted等钩子都不会被触发。

正常来说，我们向后端请求数据会在onMounted函数进行，那么导致的后果就是当路由即使正确跳转了，我们渲染的网页并不会刷新数据（这就很坏了

解决问题的思路有两个：

• 让组件实例不在复用，强制销毁重建
• 监听路由变化，变化之后执行数据更新操作

方案一

以当前路由完整路径为key值，给RounterView组件绑定

key通常与v-for进行配套使用，但是他也能用于强制替换一个元素/组件而不是复用

适当时候触发组件生命周期钩子

触发过滤

这是第一个解决思路的实现，比较消耗性能

方案二

beforeRouteUpdate导航守卫，beforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可。这是解决思路2的实现

或者使用watch监听路由参数，从而刷新数据

这种方法的性能更好一些