vue路由组件缓存问题

什么事路由缓存问题

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

我遇到的情况

这个是我点击居家的时候,地址是category/1005000

然后我点击美食

这个时候你会发现,你当前页面下的数据不会刷新,组件的生命周期钩子函数也没有调用,这种情况就是上面的组件缓存问题

解决方法

1.在路由出口处：<RouterView :key="$route.fullPath" />
$route.fullPath 路由的完整路径，包含参数部分
key最常见还是和v-for来一起使用
也可以用于强制替换一个元素/组件而不是复用它。当你想这么做时它可能会很有用:
在适当的时候触发组件的生命周期钩子
触发过渡

2.使用组件内的BeforeRouteUpdate函数,在组件发生变化的时候,重新调用你的接口

onBeforeRouteUpdate((to, from, next) => {
  // 调用你的接口更新数据
});

第一个解决方法 是让组件不复用,直接强制销毁
第二种解决方法 比较灵活,性能也比较好