Loading... ## 问题描述 跳转到其他页面，控制台出现警告，并且后续路由跳转全部失效，只能重新刷新页面 ``` Component inside <Transition> renders non-element root node that cannot be animated. ``` ## 产生原因 vue3 ```<template>```模板中等于使用了vue3的Fragments特性，存在两个root节点。这就是```<transition>```报错的原因。 例： ```html <template> <div></div> <div></div> </template> ``` ```js <router-view v-slot="{ Component, route }"> <transition :name="route.meta.transition || 'el-fade-in-linear'" mode="out-in"> <keep-alive :include="getCaches(route, Component)"> <component :is="Component" :key="route.meta.usePathKey ? route.path : undefined" /> </keep-alive> </transition> </router-view> ``` ## 解决方式 - 不使用 ```<transition>``` - 把我们的组件都包裹成单root节点 ```js <template> <div> <div></div> <div></div> </div> </template> ``` 最后修改：2022 年 12 月 07 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏