Vue3でComposition APIを使用すると、
<script setup>で記述をします。
<script setup>は、糖衣構文で簡潔にコードを書くことができます。
CompositionAPIは、これまでのVue(Options API)とは異なるもので、
thisであったり、methods、data、returnなど不要となり
トップレベルでテンプレートに直接バインディングが可能です。
今回は、記述方法が変わったrouterとrouteについて記します。
Composition APIでのrouterの定義の方法
routerは、主にSPAでの画面遷移に使用します。
これまでは、
this.$router.push
のようにVueインスタンスから定義できていました。
しかし、thisが使えないことにより、
下記のように記述します。
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter();
router.push(
{
name: 'mypage',
params: {
id: id
}
});
</script>
vue-routerからuseRouterを読み込み、定数としてuserRouter()を定義しました。
以降はrouterをthis.$routerのように使用できます。
script setup構文内であれば、useRouter()でも使用が可能ですが、
テンプレート内で直接記述すると、
Uncaught TypeError: Cannot read properties of undefined (reading ‘push’)のようにエラーが出ますし、setup構文内でしか使用できないプロパティものあるので、
const router = useRouter();のように定数に入れた方が安心です。
Composition APIでのrouteの定義の方法
routeは、queryの取得やパスやURLの書き換えができます。
定義方法はrouterと同じです。
import { useRoute } from 'vue-router'
const route = useRoute();
userId.value = route.query.userId;
上のように記述することで使用できます。
おわりに
OptionsAPIとは仕様が大きく変わっているためドキュメントを読んでCompositionAPIの記述方法を学ぶ必要があります。
ある程度記述方法を覚えるとこれまでの書き方と比べて簡潔に書けます。
ただし、コーディング規約をきちんと決めないと品質が落ちる気がします。
個人的にCompositionAPIで驚いたのが、
script setupのトップレベルは、OptionsAPIでいうcreatedでのライフサイクルの処理が走っていることです。つまり、mountedでの処理を実行したい場合は、また定義してあげる必要があるのです。
<script setup>
import {
onMounted
} from 'vue';
onMounted(()=>{
});
</script>
以上です。
コメント