【Vue.js】vue-routerでのURLパラメータ使用法

概要

Vue.jsプラグインのvue-routerにおけるURLパラメータの使用法について記述。

定義

vue-router

SPA開発に使用するVue.js公式のプラグイン。

URLパラメータ

URlの末尾に付ける値。

なぜ必要か

ユーザーによって固有のコンテンツを出し分ける為。

実装例

vue-routerの場合は、パラメータとして受け取るURLの末尾に「:パラメータ名」を付ける。

例：todoページへの遷移

path: "/todo/:id"

上記の場合、パラメータ名は「idとなる」。

そしてこの値がrouteの中にparameオブジェクトとして格納される。
$routeはvue専用の変数でルートの情報が入っている。
parameの値は配列になっており、パラメータと値がプロパティとして保存される。
データアクセスは以下の形。

$route.parame.パラメータ名

methodsでログインページからtodoページに遷移する場合の記述。

methods: {
    handleLogin(session) {
      this.$axios.post('login', session)
        .then(res => { 
          this.login = res.data,
          this.$router.push({ path: `/todo/${this.$route.params.id}`})})
        .catch(err => console.log(err.status));
        }
  }