【Vue Router】$route.params取得のタイミングとライフサイクルの理解

<template>
  <div class="room">{{ roomId }}</div>
</template>

roomIdにクエリストリングの値を使いたいとする。

Vue Routerでクエリストリングの値を取得するときはthis.$route.params.{変数名}を使用する。ところが普通に取得するとエラーになってしまう。

失敗例

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

@Component
export default class Room extends Vue {

  roomId: string = this.$route.params.room_id

}
</script>

メンバ変数に普通に代入すると、Cannot read property '_route' of undefined"などのエラーが出てしまう。Vue Devtoolsを使うとdateにrouteは存在するのになぜ・・・。

成功例

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

@Component
export default class Room extends Vue {

  roomId: string = ''

  //↓変更箇所
  created(): void {
    this.roomId = this.$route.params.room_id
  }

}
</script>

結論としてはcreatedまたはmounted内でメンバ変数に代入してあげないといけない。

どうやらインスタンス生成後（created後）以降にdataが存在しているためthis.$route.paramsを使えるようになるわけだ。逆にインスタンス生成前では失敗例のようにパラメーターが無いと怒られてしまう。

ライフサイクルの参考リンク

公式ドキュメント←本家
Vueのライフサイクル←例もあるので分かりやすい