Nuxt / VueRouter の リンク記述

Nuxt.js や VueRouter で利用可能な router-link / nuxt-link コンポーネントとその利用方法を紹介します。

Nuxt.js や VueRouter を 使用したアプリケーションで、リンクを記述する際には、 a 要素ではなく カスタムコンポーネントの router-link を使用します。

router-link を使用することで、ページ遷移時にページ全体を再読込することなく、ページ固有要素のみの追加ロードで画面の変更を行うことが出来るようになります。

また、 Nuxt.js を使用している場合は、nuxt-link というコンポーネントも用意されており、nuxt-link コンポーネントを router-link コンポーネントと同等に使用することが出来ます。

nuxt-linkrouter-link と同等なものの、将来の機能追加で プリフェッチなどの機能が追加される予定とのことです。

router-link の利用

例えば ユーザ一覧ページ /users へのページ遷移は以下のように記述します。

<router-link to="users">ユーザ一覧</router-link>

これはオブジェクトを使った以下のような書き方と等価です。

<router-link :to="{path: "users"}">ユーザ一覧</router-link>

ルート名を利用する場合、path ではなく、nameを利用して以下のように記述することも可能です。

<router-link :to="{name: 'users-Index'}">ユーザ一覧</router-link>

Nuxt.js でのコンポーネント名は フォルダ名を - で区切ったpages ディレクトリからのファイルパスの形態が取られます。

クエリパラメータを利用する場合は query を指定して以下の様に記述できます。

<router-link :to="{path: "user", query: {id:123}}">ユーザ一覧</router-link>

router-link の活用

router-link は Vue の内部で自動的に a 要素に変換されてブラウザに描画されます。

a 要素以外の、例えば button などを使用したい場合以下のように tag 要素を使用して記述します。

<router-link to="/user/add" tag="button">foo</router-link>

なお、router-link で生成されたタグは、現在のルートとリンク先が一致している場合に、router-link-activeクラスが付与されます。これは ナビなどでリンク一覧を生成している際に非常に便利な機能となっています。また、付与するクラス名を変更する際には、active-class属性で指定することも出来ます。

参考

https://router.vuejs.org/ja/api/router-link.html

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です