Nuxt composition-Apiのrouterの書き方【useRoute, useRouter】

composition-Apiにおけるthis.$route と this.$router の書き方を解説します。

動きとしては同等です。

import { computed, defineComponent, useRoute, useRouter } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const route = useRoute()
    const id = computed(() => route.value.params.id)
    const router = useRouter()
    router.push('/')
  }
}

useRoute, useRouterの違い

ついでにuseRouteとuseRouterのおさらいです。

useRoute

useRouteはpathやparams、queryなどが取得できます。

 

useRouter

useRouterはreplaceや、pushなどurlを更新する際に使用します。

replaceや、pushの違い

では下記の違いは何でしょうか。

const router = useRouter()
router.push('/') 
router.replace('/')

pushはurlの履歴が残ります。

つまりA→Bのパスに飛んだ時にブラウザの戻るを押すとAに戻るのがpush、

履歴に残ってないためAに戻れないのがreplaceです。

どちらもプロジェクトの仕様によって使い分けると良いでしょう。

コメント

タイトルとURLをコピーしました