【Vue】Vue Router ～ パラメータの受け渡し ～

Vue

■ はじめに

https://dk521123.hatenablog.com/entry/2021/01/20/165026

の続き。

ページ間でのパラメータ渡す方法が複数あるようなので
今回は、様々な渡し方について、まとめる。

なお、以下が非常に参考になった。感謝。

https://forsmile.jp/vue/910/

目次

【１】動的ルートマッチング
【２】$route.query を使用した受け渡し
【３】$route.params を使用した受け渡し
　※ props オプション での受け取り

【１】動的ルートマッチング

　例えば、
~~~~~~~~~~~~~~~~~~~~~~~~~~
http://localhost:8081/<PageName>/<Parameter(e.g. User ID etc)>
~~~~~~~~~~~~~~~~~~~~~~~~~~
のようにURLから値を設定して、
それをそのページから取得したい場合のやり方をメモする。

遷移先での値取得の仕方 

~~~~~~~~~~~~~~
  {
    path: '/<遷移先>/:id', <= 「:<Parameter Name>」で設定
    name: '<遷移先>',
    component: <遷移先>
  },
~~~~~~~~~~~~~~
で値を設定する

/user/:username/post/:post_id（e.g. /user/evan/post/123)
で複数も可能。

遷移先での値取得の仕方 

~~~~~~~~~~~~~~
this.$route.params.<Parameter Name>
~~~~~~~~~~~~~~
で値を取得する

サンプル

/src/router/index.ts 

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
//  ・・・略・・・
// ★追加
import DemoParam from '../views/DemoParam.vue'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // ★追加
  {
    path: '/DemoParam/:id',
    name: 'DemoParam',
    component: DemoParam
  },
  //  ・・・略・・・
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

/src/views/DemoParam.vue (遷移先ページ) 

<template>
  <div>
    <div>↓ここに値が表示される↓</div>
    <div>{{ this.$route.params.id }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DemoParam extends Vue {
}
</script>

動作確認 

npm run serve などでローカルサーバを起動したら

http://localhost:8081/DemoParam/00001

にアクセスする（「00001」が表示されたらＯＫ）

参考文献
https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html
https://forsmile.jp/vue/910/

【２】$route.query を使用した受け渡し

サンプル

Demo.vue 

<template>
  <div class="home">
    <div>{{ this.value1 }}</div>
    <div>{{ this.value2 }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Demo extends Vue {
  value1 = '';

  value2 = '';

  created() {
    this.value1 = this.$route.query.id.toString();
    this.value2 = this.$route.query.name.toString();
  }
}
</script>

動作確認
http://localhost:8080/Demo?id=001&name=Mike

でページ遷移すると、以下のように表示される
~~~~~
001
Mike
~~~~~

【３】$route.params を使用した受け渡し

* 受け取るときは、
　後述「※ props オプション での受け取り」のやり方がおすすめ

サンプル

Demo.vue 

<template>
  <div class="home">
    <div>
      Hello!
      <v-btn @click="move()">Move</v-btn>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Demo extends Vue {
  move() {
    this.$router.push({
      name: 'Demo2',
      params: {
        id: 'X000001',
        name: 'Mike and Tom',
      },
    });
  }
}
</script>

Demo2.vue 

<template>
  <div class="home">
    Hello!!!
    <div>{{ this.value1 }}</div>
    <div>{{ this.value2 }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Demo2 extends Vue {
  value1 = '';

  value2 = '';

  created() {
    this.value1 = this.$route.params.id.toString();
    this.value2 = this.$route.params.name.toString();
  }
}
</script>

動作確認
http://localhost:8080/Demo

に遷移して「Move」ボタン押下
 => Demo2に遷移して、以下が表示されるはず。
~~~~~
Hello!!!
X000001 <= 渡したデータ
Mike and Tom <= 渡したデータ
~~~~~

※ props オプション での受け取り

https://router.vuejs.org/ja/guide/essentials/passing-props.html#boolean-%E3%83%A2%E3%83%BC%E3%83%89

より抜粋
~~~~~~~~~~~~
Boolean モード
props を true に設定すると、route.params がコンポーネントのプロパティとして設定されます。
~~~~~~~~~~~~

利点 

コンポーネントとルートの間の密結合を分離する作りになる

router/index.ts 

import Vue from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  {
    path: '/Demo',
    name: 'Demo',
    component: () => import('../views/Demo.vue'),
  },
  {
    path: '/Demo2',
    name: 'Demo2',
    component: () => import('../views/Demo2.vue'),
    // ★ここを追加★
    props: true,
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  linkActiveClass: 'active',
  routes,
});

export default router;

Demo.vue 

* 前回と同じなので省略

Demo2.vue 

<template>
  <div class="home">
    Hello!!!
    <div>{{ this.id }}</div>
    <div>{{ this.name }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class Demo2 extends Vue {
  // ★Propで受け取る★
  @Prop() id!: string;

  @Prop() name!: string;
}
</script>

関連記事

Vue ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/04/30/000000
Vue Router ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/24/000000
Vue Router ～ 基本編 ～
https://dk521123.hatenablog.com/entry/2021/01/20/165026