什么事路由缓存问题
当我们使用带有参数的路由时需要注意的是,当用户从 /switch/10001 导航到 /users/10002 时,相同
的组件实例将被重复使用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不
过,这也意味着组件的生命周期钩子不会被调用。
我遇到的情况
这个是我点击居家的时候,地址是category/1005000
然后我点击美食
这个时候你会发现,你当前页面下的数据不会刷新,组件的生命周期钩子函数也没有调用,这种情况就是上面的组件缓存问题
解决方法
1.在路由出口处:<RouterView :key="$route.fullPath" />
$route.fullPath
路由的完整路径,包含参数部分
key最常见还是和v-for来一起使用
也可以用于强制替换一个元素/组件而不是复用它。当你想这么做时它可能会很有用:
在适当的时候触发组件的生命周期钩子
触发过渡
2.使用组件内的BeforeRouteUpdate函数,在组件发生变化的时候,重新调用你的接口
onBeforeRouteUpdate((to, from, next) => {
// 调用你的接口更新数据
});
第一个解决方法 是让组件不复用,直接强制销毁
第二种解决方法 比较灵活,性能也比较好