薄めの内容ですが、調べて「はえ〜」と思ったので、共有しておきます。
nuxt-linkや$routerは、外部サイトへのリンクとしては使えない
nuxt-linkと$routerについて
ここでは、簡単に書きます。サンプルは以下の通りです。
サンプルコード
nuxt-linkのサンプル
<nuxt-link to="/home">ホームへ</nuxt-link>
$routerのサンプル
<button @click="onClick">ホームへ</button>
~省略~
<script>
new Vue({
el: "#app",
methods: {
onClick(){
this.$router.push('/home');
}
}
})
</script>
すごいざっくり特徴を解説
箇条書きにすると、以下の感じです。
ちょっとざっくり過ぎますが、ご容赦ください。
- 両方ともページ遷移で便利
- あくまで主観的だが、aタグでのリンクと比べて、非同期的な操作感がる。サクサクとページ遷移される。
- nuxt-linkの方は、レンダリングされてブラウザで表示される際には、aタグとして描画される。
- $routerはnuxt-linkをスクリプト的な表現にしたもの。
外部サイトへのリンクでは使えない
nuxt-linkや$routerですが、以下の様な、外部サイトへのリンクとしては使えません
挙動してくれないサンプル
<nuxt-link to="https://qiita.com">Qiitaへ</nuxt-link> <!-- ※ページ遷移されない -->
エラー等は出ないですが、クリックしてもページ遷移はしてくれません。
対応策案
今の所、シンプルにaタグにして
対応策
<a href="https://qiita.com">Qiitaへ</a>
とすることぐらいでしょうか。
何か他に良い方法があれば、どなたか教えていただければ嬉しいです。
さいごに
今日は短い内容ですが、以上です。
最後まで、ありがとうございました。