前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue2升级vue3:Vue Router报错,directly inside <transition> or <keep-a

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

原创
作者头像
周陆军博客
发布2022-07-25 23:13:12
2.2K0
发布2022-07-25 23:13:12
举报
文章被收录于专栏:前端博客

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

代码语言:javascript
复制
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代码如下:

代码语言:javascript
复制
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 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • router
  • App home 页面
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档