vue router fait défiler jusqu'au hachage sans actualiser le composant

Question

J'utilise Vue 3 et vue-router 4.

Si j'ai un lien de hachage dans un composant

<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>

Dans mon routeur, j'ai

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

Cliquer sur le lien du routeur fait défiler jusqu'à l'emplacement souhaité, mais le composant est recréé pendant le défilement, je perds donc toutes les données que j'avais précédemment obtenues de l'API.

Existe-t-il un moyen d'éviter la recréation de composants si la navigation se fait au sein de la même page ?

MISE À JOUR Si je clique sur l'un de ces liens de hachage, la méthode de configuration du composant sera à nouveau exécutée afin que le composant soit recréé. Si je clique sur le même lien de hachage, il défile simplement et le composant reste actif. Cliquez sur n’importe quel autre lien de hachage et le composant sera recréé à nouveau.

Answer 1

Dans ce cas, vous pouvez simplement utiliser une balise de lien normale :

Section - 1

Si vous souhaitez utiliser <router-link>, veuillez lire cette question (https://forum.vuejs.org/t/how-to-handle-anchors-bookmarks-with-vue-router/14563), où beaucoup de ils reçoivent des suggestions sur la façon d’obtenir les résultats souhaités.