【Nuxt】aタグ・nuxt-link・$router.push の使い分けメモ

nuxt-link

アプリ内遷移の際に使用。

<nuxt-link to="/sample/">アプリ内リンク</nuxt-link>

data(){}にあるtest{id:}などを交えて、リンクとして記載する場合

<nuxt-link :to="`/sample/${test.id}`">アプリ内動的リンク</nuxt-link>

aタグ

別サイトへのリンクの際に使用。

<a href="https:..."></a>

data(){}にあるtest{url:}などを用いて別サイトのリンクを記載する場合

<a  :href="test.url"></a>

$router.push

メソッド内で使用

methods: {
    test() {
        this.$router.push('/test')
    }

vuetifyのv-btnをリンクにしたい場合

ドキュメント
https://v15.vuetifyjs.com/en/components/buttons/

nuxtプロパティはリンクがnuxt-linkであることを指定します。

nuxt
Specifies the link is a nuxt-link

<v-btn to="/pass/to/link" nuxt>リンク</ v-btn>

vuetifyのv-btnクリック時に遷移してほしい場合

<v-btn
  @click="$router.push('/messages/')"
  >一覧に戻る</v-btn
>