はじめに
前節ではvue-routerの基本的な使い方を説明しましたが、本節ではroutesにパラメータを設定する方法について説明します。
その場合、ルートから渡されるパラメータには以下の2通りがあります：
- クエリを使ってパラメータを渡します（例：/login?id=1
- パラメータをパラメータとして渡します。
クエリを使ったパラメータの受け渡し
そして、前の投稿の例を使って、ルーターリンクを設定するパスのパラメータを設定し続けます。
クエリモードでのパラメータの設定
パラメータid=10を設定し、以下のように、ブラウザに表示されるようになります：
または、コンソールに次のようにvmと入力するだけです：
どちらもパラメーターのIDがプローブされていることがわかります。
クエリのパラメータを表示
作成されたコンポーネントのライフサイクル関数にthisを出力します。routeオブジェクトを次のようにします：
this.$route.query.idそして、idデータをプリントアウトする必要がある場合は、次のように書けばいいのです。
ブラウザは以下のパラメーターを表示します：
パラメータが正常にプリントされたことが確認できます。
複数のクエリパラメータの表示
ブラウザはクエリの複数のパラメーターを以下のように表示します：
上で見たように、複数のクエリパラメータを取得することはすでに可能です。では、テンプレートでどのように使うのでしょうか？
テンプレートにクエリーパラメーターを印刷
ブラウザには以下のように表示されます：
テンプレートでは、直接thisを使用しています。テンプレートではthisを省略することもできますが、パラメータを取得するための$routeは、次のとおりです：
ブラウザは以下のように正常に表示されます：
パラメータを params として渡します。
ルートルールのパラメータルールの設定
パラメータを設定するparamsのパスの例：/register/:parameters
上記では、まず1つのパラメータを設定する方法を見てみましょう。
登録されたルーターリンクで、渡されるparamsパラメータを設定します。
<router-link to="/register/10"> </router-link>
ご覧のように、ここでは渡されたパラメータに10が設定されています。
デバッグモードで、渡されたパラメータを確認します。
では、複数のパラメータを設定することはできますか？
ルートルールに複数のパラメータを設定します。
登録されたルーターリンク設定に複数のparamsパラメータを渡します。
デバッグモードで、渡された複数のパラメーターを表示します。
すると、paramsにはすでに複数のパラメータ値があることがわかります。
テンプレートで params パラメータを使用します。
ブラウザでは以下のように表示されます：
テンプレートに params パラメータを表示することがすでに可能であることがわかります。
