0
1.1K
ViewsNuxtLink está actualizando la ruta en la aplicación nuxt 3, pero no representa el contenido
Estoy tratando de usar la ruta usando NuxtLink en una aplicación Nuxt 3, y está cambiando la ruta, pero no muestra ningún contenido. Pero, si actualizo o vuelvo a cargar la ruta actualizada que estaba en blanco antes, entonces muestra su contenido normalmente.
/pages/index.vue
<template> <div> <h1>It's Nuxt3!</h1> <p>Home Page</p> </div> <NuxtLink to="/user">User</NuxtLink> </template> /pages/user.vue
<template> <div> <h1>It's Nuxt3!</h1> <p>User Page</p> </div> </template>Estructura e ilustración de carpetas:
1 answers
Answer question0
La advertencia de la consola de Vue proporciona una pista útil:
[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< VueInstance > key="/" > at <BaseTransition mode="out-in" appear=false persisted=false ... > at <Transition name="page" mode="out-in" > at <NuxtLayout key=0 name=undefined > at <RouterView> at <NuxtPage> at <App> at <NuxtRoot> El registro apunta a <Index> (es decir, index.vue ), y vemos que el componente allí tiene dos nodos raíz , que Vue envuelve en un nodo de fragmento, lo que lleva a la advertencia de "nodo raíz sin elemento":
<template> <div> 1️⃣ <!-- root node --> <h1>Hello, World</h1> <p>It's Nuxt3!</p> </div> <NuxtLink to="/user">User</NuxtLink> 2️⃣ <!-- root node --> </template>Técnicamente, esto debería admitirse en Nuxt 3, que usa Vue 3, que admite múltiples nodos raíz, pero no estoy seguro de por qué no está permitido en este escenario.
Una solución es envolver la plantilla del componente con un solo elemento, como un div :
// index.vue <template> <div> 👈 <!-- single root node --> <div> <h1>Hello, World</h1> <p>It's Nuxt3!</p> <div> <NuxtLink to="/user">User</NuxtLink> </div> </template>