vue2升级vue3：Vue Router报错，directly inside <transition> or <keep-a

原创

周陆军博客

发布于 2022-07-25 15:13:12

2.4K00

代码可运行

文章被收录于专栏：前端博客前端博客

运行总次数：0

代码可运行

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>

</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>
    );
  },
});