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 删除。