Nuxtjsの <a> と <NuxtLink> の使い分けについて。

はじめに

Nuxtjsを使い始めて約６ヶ月経ちました。
使い始めの頃に疑問に思ったことをまとめて行きます

aとは

HTMLのタグ
リンク飛ぶのに使う。

a.html

<a href="https://google.com">Googleに飛ぶよ！</a>

まあHTML書いたことがある人は、誰でも書いたことあるよね
(ちなみにanchorのaらしいです)

NuxtLinkについて

Vuejsのrouter-linkを拡張しているもの
だからrouter-linkと同じ使い方ができる。

nuxt-link.vue

<NuxtLink to="/sample">サンプルに飛ぶよ！</NuxtLink>

じゃあ明確に何が違うの？

<a>は外部ページ、<NuxtLink>は内部ページ
と言うことです。
なので、

nuxt-link-2.vue

<NuxtLink to="https://google.com">Googleに飛ぶよ！</NuxtLink>

これは使えないと言うことです。

NuxtLinkを使うメリット

じゃあ全部<a>でよくない？と思いますよね。
僕も思いました。
どうやらNuxtjsの公式ドキュメントによると・・・

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

とのことです。
なので、同じアプリケーション内に飛ばせる時は、<nuxt-link>を使った方が、いいと言うことですね。

使い始めに思ったこと

nuxt-link-3.vue

<template>
<li v-for="(link, i) in links" :key="i">
 <!-- けどここにどうやって書けばいいか分からない。 -->
</li>
</template>
<script>
export default {
 data() {
  return {
   links: [
    { label:"これは内部ページです。", path: '/sample'},
    { label:"これは外部ページです。", path: 'https://google.com'}
   ]
  }
 }
}
</script>

これね。すごい困りました。
２つぐらいなら、いいんですけど、linksが増えてくると、割とだるいループさせたいってなるよね。

nuxt-link-4.vue

<template>
<ul>
 <li v-for="(link, i) in links" :key="i">
  <template v-if="isInternalLink(link.path)">
   <NuxtLink :to="link.path">{{ link.label }}</NuxtLink>
  </template>
  <template v-else>
    <a :href="link.path">{{ link.label }}</a>
  </template>
 </li>
</ul>
</template>
<script>
export default {
 data() {
  return {
   links: [
    { label:"これは内部ページです。", path: '/sample'},
    { label:"これは外部ページです。", path: 'https://google.com'}
   ]
  }
 },
 methods: {
  isInternalLink (path) {
   return !/^https?:\/\//.test(path)
  }
}
</script>

で解決しました。
同じ感じで詰まってる方がいたら参考にしてみてください。

終わりに

最近全然書いてませんでしたね。
学校がそれなりに忙しくて忘れてました。
あけましておめでとうございます。
今年の恵方巻きの方角は西南西らしいです。