在Vue中，当路由参数改变但路径相同，页面可能被复用而不是更新。可以通过设置router-view的key为$route.fullPath避免复用，或者使用beforeRouteUpdate钩子函数来监听参数变化并手动更新数据。如果组件被keep-alive，可能会导致缓存失效。beforeRouteUpdate会在路由改变但组件被复用时触发，可以在此处处理数据请求。
问题:
页面跳转的顺序:
/detail页面--->/message?id=1100(A)--->/messge?id=1200(B)--->/message?id=1300(C)
在从id=1100跳id=1200,由于页面地址是一样的,这时候会复用页面,不会引起页面的更新.
解决办法
1.设置 router-view 的 key 属性值为 $route.fullPath
因为路由的fullPath分别是 /message?id=1100(A)和/messge?id=1200(B),两者不一样,所以会被当成是不一样的路由,组件不再强制复用.
另外如果message组件是被keep-alive缓存的,这个时候message组件的会被当成两个组件,第一次从A->B缓存会失效.
钩子加载顺序:beforeRouteUpdate --->created --->mounted---> activated
2.利用beforeRouteUpdate钩子函数
当条装同一个地址但传递的参数发生变化就会触发钩子beforeRouteUpdate函数,在该钩子函数中重新拿地址参数去发送数据,next()继续执行该页面,可以在next()之后重新发请求.
钩子加载顺序:beforeRouteUpdate
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
