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.參數

小心踩坑哦！