【Vue.js】Vue RouterをOptions APIとComposition APIに書き換える

// ① this を使って $route を取得している
alert(`The Id of this post is: ${ this.$route.params.id }`)

// ② this を使って $router を取得している
this.$router.push({
  name: 'postDetail',
  params: {
    id: 'id1'
  }
)

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'

// route オブジェクトを取得
const route = useRoute()
// router オブジェクトを取得
const router = useRouter()

// vue-router と無関係の処理は省略

// ① this を使わず route オブジェクトへアクセス
alert(`The Id of this post is: ${ route.params.id }`)

// ② this を使わず router オブジェクトへアクセス
router.push({
  name: 'postDetail',
  params: {
    id: 'id1'
  }
})
</script>