Nuxt.jsにて、<nuxt-link>を使用して画面遷移した時に、createdが実行されない。

Question

普段、モバイルアプリの開発をしている、Nuxt.jsでのWebアプリケーションの開発の初学者です。

Nuxt.jsでは、画面遷移をする際に、 <nuxt-link> タグを使用して画面遷移をするとネットの記事などで見て、
そのように実装しました。

実際に画面遷移はできるのですが、遷移先の画面で created メソッドが実行されません。
Nuxt.jsのライフサイクルについていくつかネットの記事などを参照してみたのですが、
正直なところ、よく理解することができずという状況でして。。。

そこで、大変恐縮なのですが、質問させてください。

###実現したいこと
・遷移先の画面を表示する際に、Firebase CloudStorageから画像データをダウンロードして表示したい！

###ソースコード該当箇所抜粋

【index.vue】
<template>
  <section class="container">
    <h1>index.vue</h1>
    <div>
      <nuxt-link to="/next"> Go to Next Page!</nuxt-link>
    </div>
  </section>
</template>

【next.js】
<template>
    <section class="container">
        <h1>next.vue</h1>
        <div>
            <nuxt-link to="/">Back to TopPage!</nuxt-link>
        </div>
    </section>
</template>

<script>
export default {
 created() {
  //この処理が実行されるものと思っていました。
  //そして、created()内で画像ファイルをダウンロードして画像を表示すれば良いのかと思っていました。
  console.log("next - created called!")
 }
}
</script>

###質問したい内容
画面遷移後にFirebaseのcloudstorageから取得した画像を表示したい場合、どのタイミングで画像のダウンロード処理を実行したら良いでしょうか？

###参照した情報

Nuxt.jsでの画面遷移について
Nuxt.jsのライフサイクルについて
Nuxt.jsライフサイクル（公式）
初心者で、的を射ない質問でしたら、すみません。
ご確認の程、よろしくお願い致します。

Answer 1

間違っていたら申し訳ありませんが、
nuxt-linkで画面遷移した際に遷移先で
リロードされていないのでcreated()が
動作していないだけかと思います。

created()はリロード時に動作する様になっています。

nuxt-link（router-link）：ルーターが使用可能になっているアプリケーションでユーザーのナビゲーションを有効にするためのコンポーネント

参考：https://router.vuejs.org/ja/api/#router-link
nuxt-linkを使用することで、ページをリロードすることなく、ページ固有の要素のみを追加でロードするだけで画面遷移を行うことができます。

https://hafilog.com/nuxt-link-and-atag

Comments

[TsksHsgw]

To: laravel5さん

返信が遅くなってしまい、すみません。
ご回答ありがとうございます！

> created()はリロード時に動作する様になっています。
> nuxt-linkを使用することで、ページをリロードすることなく、ページ固有の要素のみを追加でロードするだけで画面遷移を行うことができます。

そうだったんですね！
ありがとうございます！！

モバイルの感覚で画面遷移したら必ずフックが呼ばれるのかと勘違いしておりました^^;

自分のやりたいことも以下を参照して実現できそうです！

ご丁寧にご回答いただきまして、ありがとうございました！！

[laravel5]

解決してよかったです。
自分も、実装中にnuxt-linkでcreated()が動作せず
確かaタグで遷移する様に対応したと思います。

[TsksHsgw]

本当にありがとうございます！！
「Nuxt.js使ってるなら、nuxt-link使って画面遷移するんだろうなぁ」と安直に考えてました^^;

めちゃめちゃ助かりましたm(__)m