Descripción del problema
Después de usar la etiqueta <NuxtLink to=" " /> en el proyecto nuxt3 para saltar, la página está en blanco por primera vez y el contenido de la página debe actualizarse.
El directorio de páginas y el código de la página de salto son los siguientes:
<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>Análisis de causa:
La primera vez que entré en contacto con nuxt3, siento que es un problema con la etiqueta <NuxtLink/> ¿Hay un caché?
De todos modos, el problema no es más que que la página no se vuelve a cargar. Cambié de opinión y la cambié. Finalmente, el problema se resolvió después de reemplazar la etiqueta <NuxtLink /> con una etiqueta.
solución:
el código se muestra a continuación:
<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>Finalmente, el problema debería ser que la etiqueta <NuxtLink /> no actualiza la página. El principio de <a /> es vincular de una página a otra, lo que actualizará la página.