vue-routerを使う機会があったのですが、Options APIとComposition APIで使い方が異なり、よく分からなかったので備忘録としてまとめます。
バージョン
- vue 3.3.11
- vue-router 4.2.5
記事の信頼性
- ぼくは独学で未経験から従業員300名以上の自社開発企業へ転職しました。
- 実務ではVue.jsとRailsを毎日書いています。
- 初心者や駆け出しエンジニアがつまづくポイントも身をもってよく理解しています。
目次
問題
Options APIで書かれたファイルをComposition APIに書き換える作業があったんですが、vue-routerが使われている部分をどう書き換えて良いかわかりませんでした、、、。
※この記事ではOptions APIによる以下の2つの記述例を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'
}
)解決方法
結論として以下のように書けばOKです。
<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>Composition APIではthisにアクセスできないため、vue-routerからuseRoute関数とuseRouter関数をインポートし、routeオブジェクトとrouterオブジェクトを取得する必要があります。
これで無事にvue-routerを使った記述をOptions APIからComposition APIへ書き換えることができました！
おわりに
Options APIからComposition APIの書き換えについては、こちらの記事も参考までにどうぞ↓
https://kazuya-engineer.com/2023/12/20/rewrite-from-options-api-to-composition-api-in-vue
コメント