Posted at

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の文献が少なくてもっと盛んになったらいいなって思います。

みなさまのお力添えになれば幸いです!


参考文献

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VList/VListTile.ts