Nuxt3 - ジャンプ ページの最初の画面が空白なので更新する必要があります

問題の説明

nuxt3 プロジェクトの <NuxtLink to=" " /> タグを使用してジャンプした後、初めてページが空白になり、ページのコンテンツを更新する必要があります。
ページ ディレクトリとジャンプ ページのコードは次のとおりです。

 

<template>
  <div class="index-list">
    <NuxtLink class="item" :id="index==0?'first':''" v-for="(item,index) in itemList" :key="index" :to="item.path">
      <img :src="item.icon">
      <div>{
   
   { item.name }}</div>
    </NuxtLink>
  </div>
</template>

<script lang="ts" setup>
const data = reactive({
  itemList: [
    {icon: 'static/hsb.png', name: '页面1', path: '/program/tallage'},
    {icon: 'static/htb.png', name: '页面2', path: '/program/general'},
    {icon: 'static/zsd.png', name: '页面3', path: '/program/standard'},
    {icon: 'static/hzd.png', name: '页面4', path: '/program/remit'},
  ]
})
const {itemList} = toRefs(data);
</script>

原因分析:

初めてnuxt3に触れたとき、<NuxtLink/>タグの問題だと感じたのですが、キャッシュはあるのでしょうか？ 

とにかく、ページがリロードされないというだけの問題なので、思い直して、 <NuxtLink /> タグをタグに置き換えたところ、問題は解決しました。

---

解決：

コードは以下のように表示されます:

<template>
  <div class="index-list">
    <a class="item" :id="index==0?'first':''" v-for="(item,index) in itemList" :key="index" :href="item.path">
      <img :src="item.icon">
      <div>{
   
   { item.name }}</div>
    </a>
  </div>
</template>

<script lang="ts" setup>
const data = reactive({
  itemList: [
    {icon: 'static/hsb.png', name: '页面1', path: '/program/tallage'},
    {icon: 'static/htb.png', name: '页面2', path: '/program/general'},
    {icon: 'static/zsd.png', name: '页面3', path: '/program/standard'},
    {icon: 'static/hzd.png', name: '页面4', path: '/program/remit'},
  ]
})
const {itemList} = toRefs(data);
</script>

最後に、問題は <NuxtLink /> タグがページを更新しないことです。<a /> の原理は、あるページから別のページにリンクし、ページを更新することです。