项目场景：

vue+elementui列表跳详情后，点其他菜单进行tab切换丢失详情页参数

问题描述

vue+elementui列表跳详情后，点其他菜单进行tab切换丢失详情页参数，

如图：

1. 未切换时的页面效果，此时详情页正常显示
   
2. 切换为其他页面再切回来的页面效果，因为之前的缓存，页面暂且能正常显示。看路由部分，参数已经丢失

3. 切换为其他页面再切回来，并且刷新页面。因为参数已经丢失，页面数据为空
   

原因分析：

列表跳详情用的query传参，只有从列表页跳过去才会正常传参，从其他菜单切换过去不传参导致参数丢失为空

解决方案：

用params代替query传参

列表页:
原传参方式：

//查看详情
 showHandle(id) {
      this.$router.push({
        name: "paymentRecordSee",
       query: { id: id, title: "线下支付记录查看" }
      });
    },

详情页:
原接收参数的方式：

		activated(){
          this.init(this.$route.query.id)//query接收
        },
         methods: {
            init(id) {
                this.dataForm.id = id || ''
                if (this.dataForm.id) {
                    this.$http.get(`/sys/offlinewrite/getOneBykey?id=${this.dataForm.id}`)
                    .then(({data}) => {
                        if (data && data.code === '1') {
                            let datas=data.data;
                            this.tableData=datas;
                        }
                    })
                }
            },
        }

列表页:
修改后传参方式：

//查看详情
 showHandle(id) {
      this.$router.push({
        name: "paymentRecordSee",
       params: { id: id, title: "线下支付记录查看" }
      });
    },

详情页:
修改后接收参数的方式：

		activated() {
            this.init(this.$route.params.id)//params接收
        },
         methods: {
            init(id) {
                this.dataForm.id = id || ''
                if (this.dataForm.id) {
                    this.$http.get(`/sys/offlinewrite/getOneBykey?id=${this.dataForm.id}`)
                    .then(({data}) => {
                        if (data && data.code === '1') {
                            let datas=data.data;
                            this.tableData=datas;
                        }
                    })
                }
            },
        }