NuxtJSでURLパラメータを取得する方法

nuxt.jsでURLパラメータを取得したい時があったので調べてみました。

pages配下に以下のような階層構造を作成した時、最下層のnew.vueにアクセスするURLが orders/orderId/offers/new のように作成される。

pages
  └── orders
      └── _orderId
      　   └── offers
      　       └── new.vue

このときの orderId を取得する。

new.vue

<template>
  {{ $route.params }}    // 1
</template>

<script>
export default {
  created: function() {
    console.log(this.$nuxt.$route.params.orderId)    // 1
  }
}
</script>