Vue Router一覧

Vue Routerでparamsとqueryの取得方法

Vue Routerでparamsとqueryを取得する機会があると思います。

今回の記事では、paramsとqueryの取得方法について紹介します。

パラムスの取得方法

パラムスの取得は下記のように行います。

//paramsの取得方法
//url:localhost:8080/example/:id 
console.log(this.$route.params['id'])

クエリパラメータの取得方法

クエリパラメータの取得は、下記のように行います。

//queryの取得方法
//URL:somesite.com?test=yay
console.log(this.$route.query.test) //outputs 'yay'

まとめ

Vue Routerを使用している際にparamsとqueryを取得する際の参考になれば幸いです。