はじめに

Veutifyのv-imgコンポーネントをクリックしたときに内部リンクに遷移させたい場面があったので、実装方法をご紹介します。

公式ドキュメントを参考に進めていきます。

環境

v-imgコンポーネントは、propsでtoを指定することができないため、

        <v-img
          to="/"
          :src="require('@/assets/logo.png')"
        >
        </v-img>

のように記述しても、遷移しません。

また、v-imgコンポーネントはclickイベントを設定できないため、メソッド内で遷移させることもできません。

        <v-img
          @click="goHome"
          :src="require('@/assets/logo.png')"
        >
        </v-img>

今回は、router-linkで囲うことで遷移させることができました。

       <router-link to="/">
        <v-img
          :src="require('@/assets/logo.png')"
        >
        </v-img>
      </router-link>

以上で実装完了です。

公式ドキュメントを参考に、できないことを確認することも大事だなと思いました。