Vuetifyでv-listにリンクをつける

はじめに

Vue.jsでSPAサイトを作るときにVuetifyを使ってみました。
本記事に導入方法などの記述は省きます。

開発環境

$ npm -v
6.7.0
$ vue -V
2.9.6

Vuetify - v1.5.11

やりたいこと

v-listに外部リンク(例; google.com)をつけたい。
<a>タグ使えば一瞬！なんですが、今回は極力Vuetifyで作りたかったのでソースをのぞいてみました。

方法

v-listの中に作っている、タイル（v-list-tile）にリンクを張る方法です。
外部リンクと内部リンクで書き方が若干違いました。
ここで外部リンクとは、外部ドメインのサイトで
内部リンクとはSPAの同サイト内のページを指します。

外部リンク

v-list-tileタグの中に:href="URL"とすればよいです。
これで外部リンクになります。

SPA_page1.vue

<template>
  <v-layout row>
    <v-flex mb-2>
      <v-list>
        <v-list-tile :href="http://google.co.jp">
          略
        </v-list-tile>
      </v-list>
    </v-flex>
  </v-layout>
</template>

内部リンク

同じサイト内の別のページに飛ばす場合は、:hrefではなく:toを用います。
<v-list-tile :to="page2">
こんな感じです。
余談ですが、ルート（ / ）に飛ばしたい場合も:to="/"とすればOKです！

おわりに

Vuetifyでサイト作ってますがマテリアルデザインって難しいですね！
Vuetifyの文献が少なくてもっと盛んになったらいいなって思います。
みなさまのお力添えになれば幸いです！

参考文献