tatal penghala vue ke cincang tanpa menyegarkan komponen
P粉322319601
P粉322319601 2024-03-26 09:37:39
0
1
529

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.

P粉322319601
P粉322319601

membalas semua(1)
P粉092778585

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan