tatal penghala vue ke cincang tanpa menyegarkan komponen

Question

Saya menggunakan Vue 3 dan vue-router 4.

Jika saya mempunyai pautan cincang dalam komponen

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

Dalam penghala saya, saya ada

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

Mengklik pautan penghala menatal ke lokasi yang diingini, tetapi komponen itu dicipta semula semasa menatal, jadi saya kehilangan semua data yang saya peroleh sebelum ini daripada API.

Adakah terdapat cara untuk mengelakkan penciptaan semula komponen jika navigasi berada dalam halaman yang sama?

KEMASKINI Jika saya mengklik mana-mana pautan cincang ini, kaedah persediaan komponen akan dijalankan semula supaya komponen itu dicipta semula. Jika saya mengklik pada pautan hash yang sama, ia hanya menatal dan komponen itu kekal aktif. Klik mana-mana pautan cincang lain dan komponen itu akan dicipta semula.

Answer 1

Untuk kes ini, anda mungkin hanya menggunakan tag pautan biasa:

Section - 1

Jika anda ingin menggunakan <router-link>, sila baca soalan ini (https://forum.vuejs.org/t/how-to-handle-anchors-bookmarks-with-vue-router/14563), di mana banyak mereka diberi Cadangan bagaimana untuk mencapai hasil yang diinginkan.