Vuejs3 : How can i render "transition" in rouer.js of vue-router-next?

I tried to do it like this ,but the "transition" tag is useless.

{
    path: 'PATH',
    name: 'NAME',
    component: {
      render() {
        return h('div', [h(resolveComponent('router-view'), {
          default: (props) => h(resolveComponent('transition'), {
            name: "fade-transform-vertical",
            mode: "out-in"
          }, {default: () => h(props.Component)})
        })]);
      }
    },
    meta: {title: 'A', icon: 'el-icon-discount'},
    children: [...]
  }

Finally, I can only create a new Vue file containing

<template>
  <div>
    <router-view v-slot="{ Component }">
      <transition name="fade-transform-vertical" mode="out-in">
        <keep-alive>
          <component :is="Component"/>
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

I dont want to create a new file,Is there a better solution?