Nuxt3-跳转页面首屏空白，需要刷新问题

问题描述

在nuxt3项目中 使用<NuxtLink to=" " />标签跳转之后，页面第一次都是空白，需要刷新之后才展示页面内容。
pages目录和跳转页面代码如下：

 

<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 />标签换成a标签之后 问题解决了。

---

解决方案：

代码如下：

<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 /> 的原理是从一个页面链接到另一个页面，是会刷新页面的。