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? 如何在vue3的jsx中使用keep-alive? - 知乎
https://如何在tsx中使用vue-router4的keep-alive v-direct.xecus.cc/posts/53167.html
转载本站文章《vue2升级vue3:Vue Router报错,directly inside <transition> or <keep-a》,
请注明出处:vue2升级vue3:Vue Router报错,directly inside <transition> or <keep-a - vue3学习笔记 - 周陆军的个人网站