项目场景:
vue+elementui列表跳详情后,点其他菜单进行tab切换丢失详情页参数
问题描述
vue+elementui列表跳详情后,点其他菜单进行tab切换丢失详情页参数,
如图:
- 未切换时的页面效果,此时详情页正常显示
- 切换为其他页面再切回来的页面效果,因为之前的缓存,页面暂且能正常显示。看路由部分,参数已经丢失
- 切换为其他页面再切回来,并且刷新页面。因为参数已经丢失,页面数据为空
原因分析:
列表跳详情用的query传参,只有从列表页跳过去才会正常传参,从其他菜单切换过去不传参导致参数丢失为空
解决方案:
用params代替query传参
列表页:
原传参方式:
//查看详情
showHandle(id) {
this.$router.push({
name: "paymentRecordSee",
query: {
id: id, title: "线下支付记录查看" }
});