【Vue.js】VueRouterでURLパラメータを設定・使う方法を実例で解説。$routeやparamsとは何か？使い方

Vue.jsの公式ライブラリVueRouterを使うと、SPAのアプリケーションを簡単に作成することができます。

VueRouterではユーザ毎に固有のページを表示するなど、URLパラメータを使うこともできます。

URLパラメータを使えば、ユーザー毎に固有の値を割り振り分け、その値を取得してコンテンツを出し分けることができます。

例えば、ログインユーザーごとに異なるページの内容を表示する場合など、URLを「~/user/ユーザーid」とするように、URLに固有の値を振り分ける場合です。

ここでは、URLパラメータを使ったルート（パス）を設定する方法や、ページに渡されたURLパラメータを取得して画面上に表示する方法についてまとめています。

URLの情報をパラメータとして取得する方法（$routeとparamsの使い方）

URLパラメータを使用する場合は、RouterVueのpathの部分にパラメータとして受け取りたいURLの部分に「:」をつけます。

「:」の後ろがURLパラメータの名前になります。（例：/user/:userId　なら、パラメータ名は「userId」）

すると、こららの値が、$route変数の中にparamsオブジェクトとして格納されます。$routeはVue専用の変数でルートの情報が入っているものです。

なお、paramsの値は配列になっていてその中に、パラメータ名と値がプロパティとして保存されています。（例：params:[ { パラメータ名:値 } ] ）

取得したデータにアクセスするには、$route.params.パラメータ名とします。

以下で、URLパラメータを使うまでの手順を実例を用いて解説しています。

URLの情報をパラメータとして取得する方法（$routeとparamsの使い方）

URLパラメータを使ったアプリケーションの作成手順
URLパラメータを複数設定する方法
(参考コード) URLパラメータの使い方実例

URLパラメータを使ったアプリケーションの作成手順

pathの作成

URLパラメータとして取得したいVueRouterのパスを設定します。例えば、2つ目の/ /の部分をパラメータにしたい場合は次のようになります。

path: '/パス/:パラメータ名'

パラメータにする部分は複数作成することも可能です。（※パラメータ名は固有なものにしてください）

例1： path: ‘/パス/:パラメータ名1/:パラメータ名2’

例２： path: ‘/prefecture/shop/:shopId/items/:itemId’

実例

//VueRouterインスタンスの生成
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

//Vueインスタンスの生成
const app = new Vue({
  router
}).$mount('#app')

path: '/user/:id'としたことで、/user/123というURL（123は任意）にアクセスすると、このルーティングに飛ぶようになります。

その際、$routeのparamasオブジェクトには{ "id": "123" }というデータが入ります。

componentの値「User」は変数です。これは以下で後ほど設定します。

htmlファイルに対象のrouter-linkを設置する

htmlファイルの中にrouter-linkタグを設置します。toの値は静的なリンクですが、pathの内容と連動させます。

パラメータの部分はユーザーIDなどになります。基本的にはユーザーログインなどに合わせて動的に数値が入るようにします。

<router-link to="パス">アンカーテキスト</router-link>

実例

<body>
    <div id="app">

        <!-- Userコンポーネントへのリンク -->
        <router-link to="/user/123">・Userページ</router-link>

    　　<!-- コンポーネントの表示領域 -->
        <router-view></router-view>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
</body>

<router-link to="/user/123">・Userページ</router-link>の部分でリンク先を「/user/123」としています。

これが上記の、path: '/user/:id'と対応します。この結果、リンク先のページに渡される$routeには、{ "id": "123" }というデータが入ったparamasオブジェクトが入ります。

パラメータを取得して表示する

最後に、router-linkタグのリンク先のテンプレートに渡されたparamasオブジェクトのデータを呼び出します。

データへのアクセス方法は以下のようになります。

$route.params.パラメータ名

実例

Userという変数を定義して、その中にコンポーネントの内容を記述します。その際、渡されたデータを{{ $route.params.id }}として呼び出します。

//コンポーネントの中身を定数として作成
const User = { template: '<p> ユーザーID： {{ $route.params.id }} </p>'}

//VueRouterインスタンスの生成
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

//Vueインスタンスの生成
const app = new Vue({
  router
}).$mount('#app')

以上で設定は完了です。

ブラウザの表示

ブラウザの表示は以下のようになります。

デフォルトでは「Userページ」というリンクのみが表示されています。

↓ リンクをクリック

{{ $route.params.id }}の部分に「123」が入り、パラメータが呼び出せていることがわかります。

URLパラメータを複数設定する方法

URLパラメータ使用の応用編として、パラメータを複数設定する例を紹介します。

pathの作成

URLパラメータとして取得したいVueRouterのパスを設定します。例えば、2つ目と3番目の/ /の部分をパラメータにしたい場合は次のようになります。

path: '/パス/:パラメータ名1/:パラメータ名２'

※パラメータ名は固有である必要があります。

/:パラメータ名1/パス/:パラメータ名2/パス/パス/:パラメータ名３といったように、URLの中でパラメータとして欲しい場所を「:パラメータ名」とすれば、そこに該当する数値や文字列をパラメータとして受け取ることができます。　

実例

//VueRouterインスタンスの生成
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id/:name',
      component: User
    }
  ]
})

//Vueインスタンスの生成
const app = new Vue({
  router
}).$mount('#app')

path: '/user/:id/:name'としたことで、/user/xxx/yyyというURL（xxx, yyyは任意）にアクセスすると、このルーティングに飛ぶようになります。

その際、$routeのparamasオブジェクトには{ "id": "xxx", "name": "yyy" }というデータが入ります。

componentの値「User」は変数です。これは以下で後ほど設定します。

htmlファイルに対象のrouter-linkを設置する

htmlファイルの中にrouter-linkタグを設置します。toの値は静的なリンクですが、pathの内容と連動させます。

<router-link to="/パス1/パス2/パス3">アンカーテキスト</router-link>

実例

<body>
    <div id="app">

        <!-- Userコンポーネントへのリンク -->
        <router-link to="/user/123/steve">・Userページ</router-link>

    　　<!-- コンポーネントの表示領域 -->
        <router-view></router-view>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
</body>

<router-link to="/user/123/steve">・Userページ</router-link>の部分でリンク先を「/user/123/steve」としています。

これが上記の、path: '/user/:id/:name'と対応します。この結果、リンク先のページに渡される$routeには、 { "id": "123", "name": "steve" } というデータが入ったparamasオブジェクトが入ります。

パラメータを取得して表示する

最後に、router-linkタグのリンク先のテンプレートに渡されたparamasオブジェクトのデータを呼び出します。

データへのアクセス方法は以下のようになります。

$route.params.パラメータ名

実例

Userという変数を定義して、その中にコンポーネントの内容を記述します。その際、渡されたデータを{{ $route.params.name }}と {{ $route.params.id }} として呼び出します。

//コンポーネントの中身を定数として作成
const User = {
  template: `
    <div>
      <p>こんにちは「{{ $route.params.name }}」さん！</p>
      <p>あなたのユーザーIDは「{{ $route.params.id }}」です。</p>
    </div>
  `
}

//VueRouterインスタンスの生成
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id/:name',
      component: User
    }
  ]
})

//Vueインスタンスの生成
const app = new Vue({
  router
}).$mount('#app')

以上で設定は完了です。

ブラウザの表示

デフォルトでは「Userページ」というリンクのみが表示されています。

↓ リンクをクリック

{{ $route.params.name }}に「steve」が入り、 {{ $route.params.id }}に「123」が入っていることがわかります。

以上で、URLパラメータを複数設置と呼び出しが完了です。

(参考コード) URLパラメータの使い方実例

参考として単一のURLパラメータと複数のURLパラメータを使って表示内容を出し分けるSPAページのコードを記載しておきます。

.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Router</title>
</head>
<body>
    <div id="app">
      
        <!-- UserIdコンポーネントへのリンク -->
        <router-link to="/user/123">・UserIdページ</router-link>

        <br>
      
        <!-- UserIdNameコンポーネントへのリンク -->
        <router-link to="/user/123/steve">・User名とIDのページ</router-link>

    　　<!-- コンポーネントの表示領域 -->
        <router-view></router-view>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
</body>
</html>

.jsファイル

//コンポーネントの中身を定数として作成
const UserId = { template: '<p> ユーザーID： {{ $route.params.id }} </p>'}

const UserIdName = {
  template: `
    <div>
      <p>こんにちは「{{ $route.params.name }}」さん！</p>
      <p>あなたのユーザーIDは「{{ $route.params.id }}」です。</p>
    </div>
  `
}

//VueRouterインスタンスの生成
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: UserId
    },
    {
      path: '/user/:id/:name',
      component: UserIdName
    }
  ]
})

//Vueインスタンスの生成
const app = new Vue({
  router
}).$mount('#app')