NuxtLink 正在更新 nuxt 3 应用程序中的路由,但不渲染内容
Posted
技术标签:
【中文标题】NuxtLink 正在更新 nuxt 3 应用程序中的路由,但不渲染内容【英文标题】:NuxtLink is updating route in nuxt 3 app, but not rendering contents 【发布时间】:2022-01-20 13:41:59 【问题描述】:我正在尝试在 Nuxt 3 应用程序中使用 NuxtLink 使用路由,它正在更改路由,但没有显示任何内容。但是,如果我刷新或重新加载之前空白的更新路线,那么它会正常显示它的内容。
/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>
文件夹结构和插图:
【问题讨论】:
在这里工作正常:codesandbox.io/s/nuxt-demo-3myzh @VaritJPatel 我刚刚在本地创建了另一个应用程序进行检查。而且,它的行为和以前一样。空白! @VaritJPatel 请检查,github.com/iamsabbirsobhani/nuxt3-demo 【参考方案1】:来自 Vue 的控制台警告提供了有用的提示:
[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>
日志指向<Index>
(即index.vue
),我们看到导致问题的component there has two root nodes:
<template>
<div> 1️⃣ <!-- root node -->
<h1>Hello, World</h1>
<p>It's Nuxt3!</p>
</div>
<NuxtLink to="/user">User</NuxtLink> 2️⃣ <!-- root node -->
</template>
从技术上讲,这个应该在 Nuxt 3 中得到支持,它使用支持多个根节点的 Vue 3,但我不确定为什么在这种情况下不允许这样做。
一种解决方法是用单个元素包装组件的模板,例如div
:
// index.vue
<template>
<div>
<div>...<div>
<NuxtLink to="/user">User</NuxtLink>
</div>
</template>
【讨论】:
以上是关于NuxtLink 正在更新 nuxt 3 应用程序中的路由,但不渲染内容的主要内容,如果未能解决你的问题,请参考以下文章
如何检查 s-s-r Nuxt 应用程序中的服务器构建是不是已更新
如何更新 vuetify mdi 图标? (Nuxt.js)