API: <nuxt-link> コンポーネント

このコンポーネントは、ページコンポーネント間のナビゲーションを提供し、賢い prefetching(先読み)でパフォーマンスを高めるのに使用します。

<nuxt-link> は Nuxt の重要な要素です。あなたのアプリケーションを遷移するのに使われるべきコンポーネントで、従来の Vue アプリケーションにおける <router-link> と似ています。実際に、<nuxt-link><router-link> を拡張しています。つまり、同じプロパティを取り、同じように使うことができるということです。詳しくは、Vue Router のドキュメント を参照してください。

例(pages/index.vue):

<template>
  <div>
    <h1>ホームページ</h1>
    <nuxt-link to="/about">このサイトについて(Nuxt アプリケーション内部リンク)</nuxt-link>
    <a href="https://nuxtjs.org">別のページへの外部リンク</a>
  </div>
</template>

エイリアス: <n-link>, <NuxtLink>, <NLink>

この機能は Nuxt.js v2.4.0 で追加されました

Nuxt.js アプリケーションの応答性を高めるため、viewport(ブラウザの表示領域)内にリンクが表示されたとき、Nuxt.js はコード分割されたページを自動的に先読みします。この機能は Google Chrome Labs の quicklink.js にインスパイアされています。

リンク先ページの先読みを無効化するために、no-prefetch プロパティを使うことができます。Nuxt.js v2.10.0 からは prefetch プロパティを false に設定することもできます。:

<n-link to="/about" no-prefetch>先読みしないページについて</n-link>
<n-link to="/about" :prefetch="false">先読みしないページについて</n-link>

router.prefetchLinks を使って、この挙動をグローバルに設定することができます。

Nuxt.js v2.10.0 からは、router.prefetchLinks をグローバルに false に設定した上で特定のリンクを先読みしたい場合 prefetch プロパティを使うことができます。

<n-link to="/about" prefetch>先読みするページについて</n-link>

また、コード分割されたページの先読みが完了したとき付与される class をカスタマイズするため、 prefetched-class プロパティを使用することもできます。この機能は router.linkPrefetchedClass でグローバルに設定できることを必ず確認してください。

Contributors

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する

Platinum Sponsors

Storyblok
Support Us