Aタグとnext-linkの使い方を間違えた話

何が起きたか

このブログ、記事に貼り付けてある画像はnuxt-imageを使ってリサイズしている。 記事を開いた時のロード時間を短くするためだ。 ただ、それだけでは等倍の画像を見れなくなってしまうので画像をクリックした時に等倍写真へ飛ぶようにリンクを張ってある。

そのため、画像をクリックしたときには画像ファイルが開かれるのが期待した動作なのだが、クリックするとなぜかnuxtのNotFoundページを開いてしまう。 その時のブラウザのアドレスバーを見ると確かに画像のURLにはなっている。 その証拠としてアドレスを直接打ち込んで遷移すると確かに画像が開かれる。

しかも、NotFoundページでF5を押すとなぜか画像のページを開ける。 アドレス直打ちと同じ挙動ということ？

その後、色々調べてChromeの開発者ツールでログを追ってみたりしたが、問題の遷移時にはページをロードしてないらしいことがわかった以外収穫がなかった。

結局何が起きていたか

色々なキーワードで調べていたところ、Generate時の動的ルーティングの話に辿り着いた。 そういえば、nuxt-linkはrouter-linkの拡張なのでページ遷移扱いになるんだっけ。

問題の画像を囲っているタグを確認したところ、Aタグではなくnuxt-linkになっていた。 なるほどなるほど。 遷移先のページがなかったのでNotFoundが出ていたのか。

解決

というわけで問題の箇所でAタグを使うように変更して一件落着。 ファイルを直接貼り付けてダウンロードさせるような使い方の時も同じなのかな。 詳細はわからないが、まあ想定通りに動くようになったのでよしとしよう。