URLパラメータの付与
URLパラメータというのは下記のようにURLの末尾につける数字のことです。
|
1 |
http://localhost/{数字} |
$routeオブジェクト経由で渡す
メリット
ルーター経由でしか使えないコンポーネントという事で用途を制限できます。
router.js
下記のように「:パラメータ名」と指定します。
|
1 2 3 4 5 6 |
const router = new VueRouter({ routes:[ { path:"/",component:コンポーネント1}, { path:"/test/:id",component:コンポーネント2} ] }) |
SFC側
「$route.params.パラメータ名」と記述して渡ってきたパラメータにアクセスする事が可能です。$routeに関しては後述します。
|
1 2 3 |
<div> {{ $route.params.id }} </div> |
$routeオブジェクトを使って動的なパラメータを渡す。
名前付きルート(事前にrouter.jsのroutesにname要素としてコンポーネントを登録しておく必要があります。)と組み合わせれば$routerにpushする構文でパラメータを渡す事が可能です。
|
1 |
this.$router.push({ name:'URL',params: { パラメータ名: 動的なパラメータ：JavaScript処理}}) |
props経由で渡す。
メリット
ルーター関係なくpropsで渡せるのでコンポーネントの再利用性が高まります。
router.js側
props経由で渡したいオブジェクトのリンク設定に「props:true」を付け加えます。
|
1 2 3 4 5 |
export default new Router({ mode: "history", routes: [{ path: '/', component: Home }, { path: '/content/:id', component: Content, props: true }] }); |
SFC側
渡されるコンポーネント側としてはpropsとして受けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <div> <h1>Content</h1> {{ id }} </div> </template> <script> export default { props: ["id"] }; </script> |
router-linkを使って動的パラメータを渡す。
router.js側にname要素を指定します。これを名前付きルートと呼びます。
|
1 2 3 4 |
export default new Router({ routes: [ { path: '/content/:id', component: Content, props: true, name: "content-url" }] }); |
コンポーネント側のリンクは下記のように記述します。コンポーネントにオブジェクト形式でパラメータを渡す事が可能です。
|
1 2 3 |
<router-link :to="{ name: 'content-url', params: {id: Number(id) + 1 } }" >リンク名</router-link> |
クエリパラメータを渡す
URLパラメータというのは下記のようにURLの末尾につける？付きのパラメータのことです。。
|
1 |
http://localhost/content?id=1 |
router-linkを使って渡す方法
下記のようにqueryという要素を使用して記述します。なお、queryに関しては特にname（名前付きルート）を使用しなければならないという制約はなく、pathでも大丈夫です。
|
1 2 3 4 5 6 |
<router-link :to="{ name: 'content-url', params: {id: Number(id) + 1 }, query:{str: 'test'} }" >リンク名</router-link> |
この記事へのコメントはありません。