【Vue】Methodsからクエリパラメータを送り、遷移先画面でパラメータを受け取る方法！

あきぞらです。Vue勉強中です。

Vueをいじっていて、POSTリクエストを送って画面遷移をし、その値を受け取りたいときがありました。

今回は、mehodsからクエリパラメータを送信して遷移先でパラメータを取得する方法について紹介していきます。

クエリパラメータを送る

JSON形式で送信してみます。

 
  methods: {
    myMethod() {
      this.$router.push({
        path: '/customer',
        query :{
          customerId: '0123',
          customerName: 'Akizora',
          customerMail: 'akizora@test'
        }
      });
    }
 

queryに送りたいパラメータを書いていきます。

パラメータを受け取る

遷移先の画面でパラメータの値を受け取ります。

 
 methods: {
    test() {
      const customerId= this.$route.query.customerId
      const customerName= this.$route.query.customerName
      const customerMail= this.$route.query.customerMail
    }
}
 

これでパラメータの受け渡しができました！