vue2升级vue3：Vue Router报错，directly inside <transition> or <keep-a
原创vue2升级vue3：Vue Router报错，directly inside <transition> or <keep-a
原创
vue3 报这个错误：
vue-router.mjs:35 [Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.
Use slot props instead:
<router-view v-slot="{ Component }">
? <keep-alive>
? ? <component :is="Component" />
? </keep-alive>
</router-view>
v-slot这种用法在tsx里应该是不能直接这么使用的，毕竟tsx不比模板，写tsx的本质其实是在写渲染函数，于是去翻阅babel-tsx-plugin的文档
最终实现代码：
router
router 页面设置了keep alive
const?router?=?[
??{
????path:?'dashboards/:folder_uid/:uid',
????name:?'dashboard-info',
????component:?()?=>?import(/*?webpackChunkName:?"DashboardPreview"?*/'@/pages/dashboard/dashboard'),
????props:?route?=>?({?uid:?route.params.uid?}),
????meta:?{
??????parent:?'dashboard',
????},
??},
??{
????path:?'share-panel/:folder_uid/:uid',
????name:?'sharePanel',
????//?component:?SharePanel,
????components:?{
??????keepAlive:?()?=>?import(/*?webpackChunkName:?"SharePanelPage"?*/?'../pages/dashboard/dashboard-editor'),
????},
????meta:?{
??????isHideNav:?true,
????},
??},
]当然，也可以使用meta? 来控制是否 keep-alive。不然过建议用上面的方式实现。
App home 页面
页面路由tsx代码如下：
import?{?defineComponent,?KeepAlive,?Transition,?Suspense,?computed?}?from?'vue';
import?{?useRoute,?RouterView?}?from?'vue-router';
import?Navigation?from?'../../components/navigation';
import?Loading?from?'@/components/loading';
export?default?defineComponent({
??name:?'HomePage',
??setup()?{
????const?route?=?useRoute();
????const?isHideNav?=?computed(()?=>?{
??????let?{?isHideNav?}?=?route.meta;
??????if?(window.location.search.includes('embed'))?{
????????isHideNav?=?true;
??????}
??????return?isHideNav;
????});
????const?routeClass?=?computed(()?=>?{
??????if?(isHideNav.value)?{
????????return?'full-page';
??????}
??????return?'flex-1';
????});
????return?()?=>?(
??????<div?class='full-height?flex-column'>
????????{!isHideNav.value?&&?(<Navigation/>)}
????????<RouterView?class={routeClass.value}?name='keepAlive'>
??????????{{
????????????default:?({?Component,?route?}:?{?Component:?()?=>?JSX.Element,?route:?any?})?=>?(
??????????????<KeepAlive>
????????????????<Component?key={route.meta.usePathKey?||?route.params.space_uid}/>
??????????????</KeepAlive>
????????????),
??????????}}
????????</RouterView>
????????<RouterView?class={routeClass.value}>
??????????{{
????????????default:?({?Component,?route?}:?{?Component:?()?=>?JSX.Element,?route:?any?})?=>?(
??????????????<Transition?name={route.meta.transition?||?'fade'}?mode='out-in'>
????????????????<Suspense>
??????????????????{{
????????????????????default:?()?=>?<Component?key={route.meta.usePathKey?||?route.params.space_uid}/>,
????????????????????fallback:?()?=>?<Loading/>,
??????????????????}}
????????????????</Suspense>
??????????????</Transition>
????????????),
??????????}}
????????</RouterView>
??????</div>
????);
??},
});参考链接：
如何在vue3的jsx中使用keep-alive？ https://www.zhihu.com/question/467503706
https://如何在tsx中使用vue-router4的keep-alive v-direct.xecus.cc/posts/53167.html
转载本站文章《vue2升级vue3：Vue Router报错，directly inside <transition> or <keep-a》, 请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8862.html
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。