Ich verwende Vue 3 und Vue-Router 4.

Wenn ich einen Hash-Link in einer Komponente habe

<router-link :to="{ hash: '#l1' }">Section - 1</router-link>
<router-link :to="{ hash: '#l2' }">Section - 2</router-link>
...
<section id="l1">...</section>
<section id="l2">...</section>

In meinem Router habe ich

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
      }
    }
  },
})

Durch Klicken auf den Router-Link scrollen Sie zum gewünschten Ort, aber die Komponente wird beim Scrollen neu erstellt, sodass ich alle Daten verliere, die ich zuvor von der API erhalten habe.

Gibt es eine Möglichkeit, die Neuerstellung von Komponenten zu vermeiden, wenn sich die Navigation auf derselben Seite befindet?

UPDATE Wenn ich auf einen dieser Hash-Links klicke, wird die Setup-Methode der Komponente erneut ausgeführt, sodass die Komponente neu erstellt wird. Wenn ich auf denselben Hash-Link klicke, scrollt er einfach und die Komponente bleibt aktiv. Klicken Sie auf einen anderen Hash-Link und die Komponente wird erneut erstellt.