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です。
どちらもプロジェクトの仕様によって使い分けると良いでしょう。
コメント