The best practice for using scrollBehavior and <Transition> together.

[yoshi-pi]

I did it as follows. What do you think?

App.vue

<script setup>
import { triggerScroll } from './router/utils'
</script>
<template>
  <RouterView v-slot="{ Component }">
    <Transition mode="out-in" @before-enter="triggerScroll">
      <component :is="Component" />
    </Transition>
  </RouterView>
</template>

router/index.js

import { onTriggerScroll } from './utils'
scrollBehavior(to, _from, savedPosition) {
  return new Promise((resolve) => {
    onTriggerScroll(() => {
      let position
      if (savedPosition) {
        position = savedPosition
      } else if (to.hash) {
        position = {
          el: to.hash
        }
      } else {
        position = {
          top: 0
        }
      }
      resolve(position)
    })
  })
}

router/utils.js

let cb
export function triggerScroll() {
  if (cb) {
    cb()
  }
}
export function onTriggerScroll(behaviorCb) {
  cb = behaviorCb
}