如何同时使用 RouterView / KeepAlive / Transition ？

[noahlann]

目前的写法是

return (
        <div>
          <RouterView>
            {{
              default: ({ Component, route }: { Component: any; route: RouteLocation }) => {
                const name = route.meta.inTab ? 'fade' : null;

                const Content = (
                  <KeepAlive max={max} include={cacheTabs}>
                    <Component />
                  </KeepAlive>);

                return (
                  <Transition
                    name={name}
                    mode="out-in"
                    appear={true}
                  >
                    {Content}
                  </Transition>
                );
              },
            }}
          </RouterView>
        </div>

异常:

Uncaught (in promise) TypeError: Cannot read property '_' of null
    at initSlots (runtime-core.esm-bundler.js?5c40:2731)
    at setupComponent (runtime-core.esm-bundler.js?5c40:6183)
    at mountComponent (runtime-core.esm-bundler.js?5c40:3960)
    at processComponent (runtime-core.esm-bundler.js?5c40:3936)
    at patch (runtime-core.esm-bundler.js?5c40:3547)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4053)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4018)
    at mountComponent (runtime-core.esm-bundler.js?5c40:3976)

单独使用 RouteView + KeepAlive 与 RouteView + Transition 都没有任何问题，就是 KeepAlive + Transition 一起就会出问题。

另外也尝试过使用 slots / defineAsyncComponent 等方式

<KeepAlive max={max} include={cacheTabs} v-slots={{default: ()=> <Component />}} />
// or
<KeepAlive max={max} include={cacheTabs} >
   {defineAsyncComponent(Component)}
</KeepAlive>

... Transition 一致

const Content = (
                  <Transition
                    name={name}
                    mode="out-in"
                    appear={true}
                  >
                    <Component />
                  </Transition>
                );
return (
                  <KeepAlive max={max} include={cacheTabs}>
                    <Content />
                  </KeepAlive>);

均只能 KeepAlive 与 Transition 不在一起使用时正常。

在 vite 中测试了一下是可以一起使用的。 似乎 children 在 vite 是个array，在这边是个 object ? 不太清楚。。。

edit:

在KeepAlive外层加入 <div></div> 就不会报错，但Transition失效，估计要调整一下。

[Zcating]

使用 resolveDynamicComponent

<KeepAlive max={max} include={cacheTabs} >
   {resolveDynamicComponent(Component)}
</KeepAlive>

[noahlann]

使用 resolveDynamicComponent

<KeepAlive max={max} include={cacheTabs} >
   {resolveDynamicComponent(Component)}
</KeepAlive>

thanks. 已经转vite了，没有再用 jsx-next 。 resolveDynamicComponent也试过了，只要Transaction与KeepAlive一起用就一样的问题。可能我的写法上有点问题。。。

[Ttou]

遇到同样的问题，没有解决方案吗

[Amour1688]

遇到同样的问题，没有解决方案吗

Next version

[TLovers]

目前的写法是

return (
        <div>
          <RouterView>
            {{
              default: ({ Component, route }: { Component: any; route: RouteLocation }) => {
                const name = route.meta.inTab ? 'fade' : null;

                const Content = (
                  <KeepAlive max={max} include={cacheTabs}>
                    <Component />
                  </KeepAlive>);

                return (
                  <Transition
                    name={name}
                    mode="out-in"
                    appear={true}
                  >
                    {Content}
                  </Transition>
                );
              },
            }}
          </RouterView>
        </div>

异常:

Uncaught (in promise) TypeError: Cannot read property '_' of null
    at initSlots (runtime-core.esm-bundler.js?5c40:2731)
    at setupComponent (runtime-core.esm-bundler.js?5c40:6183)
    at mountComponent (runtime-core.esm-bundler.js?5c40:3960)
    at processComponent (runtime-core.esm-bundler.js?5c40:3936)
    at patch (runtime-core.esm-bundler.js?5c40:3547)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4053)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4018)
    at mountComponent (runtime-core.esm-bundler.js?5c40:3976)

单独使用 RouteView + KeepAlive 与 RouteView + Transition 都没有任何问题，就是 KeepAlive + Transition 一起就会出问题。

另外也尝试过使用 slots / defineAsyncComponent 等方式

<KeepAlive max={max} include={cacheTabs} v-slots={{default: ()=> <Component />}} />
// or
<KeepAlive max={max} include={cacheTabs} >
   {defineAsyncComponent(Component)}
</KeepAlive>

... Transition 一致

const Content = (
                  <Transition
                    name={name}
                    mode="out-in"
                    appear={true}
                  >
                    <Component />
                  </Transition>
                );
return (
                  <KeepAlive max={max} include={cacheTabs}>
                    <Content />
                  </KeepAlive>);

均只能 KeepAlive 与 Transition 不在一起使用时正常。

在 vite 中测试了一下是可以一起使用的。 似乎 children 在 vite 是个array，在这边是个 object ? 不太清楚。。。

edit:

在KeepAlive外层加入 <div></div> 就不会报错，但Transition失效，估计要调整一下。

我在tsx里面直接用Transition这个全局组件， 为啥会报错说这个 If this is a native custom element 这种 非要手动导入才行