问题描述
在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 /> 的原理是从一个页面链接到另一个页面,是会刷新页面的。