从商品 A 点进推荐的商品 B,地址栏 id 已经变了,页面内容还是 A,控制台没有报错,组件 mounted 只执行了一次,接口请求也没再发。日志里能对上时间点,这种反而好排。
同一个路由组件被复用,参数变化不会触发创建和销毁,初始化逻辑只写在 mounted 里,就再也没跑过,页面自然停在旧数据上,这不是接口没返回,刷新也没用。这一点先确认清楚,后面就不用反复试。
watch(() => route.params.id, load, { immediate: true });
<router-view :key='route.fullPath' />
「路由参数复用」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。偶发问题先统计频率,一小时几次和一天一次,查法完全不同。
改完顺手把文档补一句,省得下次自己重新推一遍。监控和日志的时间要对上,时区不一致会多绕很大一圈。
处理上按这个顺序:watch route.params 变化后重新拉数据;给 router-view 加一个 key 强制重建组件,简单但很有效;在 beforeRouteUpdate 钩子里处理参数切换,别等组件重建。
结果对不对很好判断,详情页之间跳转内容立即刷新,不残留上一条数据,返回也一样。
