Scrollen Sie mit dem Vue-Router zum Hash, ohne die Komponente zu aktualisieren

Question

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.

Answer 1

对于这种情况，您可能只使用普通的链接标签：

Section - 1

如果您想使用 <router-link>，请阅读 这个问题 (https://forum.vuejs.org/t/how-to-handle-anchors-bookmarks-with-vue-router/14563)，其中很多给出了如何达到预期结果的建议。