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 的文档

最终实现代码：

routerrouter 页面设置了 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