how to use render function to return router-view-slot?

[hezhongfeng]

I want use render function to achieve the same effect.

<router-view v-slot="{ Component }">
  <component :is="Component" />
</router-view>

my code is

<script>
import { h, resolveComponent } from 'vue';

export default {
  setup() {
    return () =>
      h(resolveComponent('router-view'), null, {
        default: ({ Component }) => h('component', { is: Component })
      });
  }
};
</script>

the resule is blank page

// this is ok, but I want use slot to use keep-alive 
return () => h(resolveComponent('router-view'));

thanks.

[skirtles-code]

Here's an example:

• Playground

In that example, I'm importing RouterView directly, rather than using resolveComponent, but either way should work.

In general, <component :is="foo"> becomes h(foo). But in the specific case of RouterView, the Component slot prop is already a VNode, so the extra h() call can be skipped:

h(RouterView, null, ({ Component }) => Component)

If you wanted to write that out in full it might be something like this:

h(RouterView, null, {
  default({ Component }) {
    return Component ? h(Component) : null
  }
})

The code above also needs to take account of the initial value of Component being undefined.

[hezhongfeng]

thanks for your help.