vue路由的两种传参方式

1.params传值

    传参 - 根据route的name进行匹配

     this.$router.push({
        name: '充电订单详情',  //匹配route里面配置的name
        params: {
          detailFrom: 1 //传递的参数名和值
        }
      });

    接收

  data(){
    return {
      detailFrom: 1
    }
  },
  created() {
    this.showForm();
  },
  methods: {
    showForm() {
      //this.$route.params.detailFrom为传递参数值
      this.detailFrom = this.$route.params.detailFrom;
    }

存在的问题 - 刷新数据将会没有

 

2.query

传值 - 根据的route的path进行匹配

 this.$router.push({
        path: '/order/chargedtail',
        query: {
          //将对象转换为json传递
          detailFrom: JSON.stringify(row)
        }
      });

接收

  data() {
    return {
      detailFrom: {
        num: 1111
      }
    };
  },
  activated() {
    this.showForm();
  },
  methods: {
    showForm() {
      this.detailFrom = JSON.parse(this.$route.query.detailFrom);
    }
  }

query的坑 -  (1)created 在第一次进行传值会调用

                     当第二次再次点击的时候，将不会再进行调用

                      （2）query传值，如果是对象需要转为json字符串，否则在进行传值依旧会出现刷新无值，

                              传递对象，刷新，数据将会变为[object,object]

  

总结， query和params传值接收 - this.$route.xxx.参数

小心踩坑哦！