Vue melaksanakan lompatan tempatan

Dengan aplikasi Vue yang meluas, kami selalunya perlu melaksanakan fungsi lompat setempat dalam aplikasi satu halaman. Lompatan jenis ini terutamanya merujuk kepada lompatan pautan dalam halaman, seperti merealisasikan fungsi "kembali ke atas", atau merealisasikan fungsi menukar kandungan berbeza dalam aplikasi satu halaman.

Selepas beberapa kajian, saya mendapati dua kaedah pelaksanaan yang lebih berkesan, iaitu menggunakan mata penambat dan melaksanakannya secara pemrograman.

Menggunakan sauh

Sauh ialah sintaks HTML yang boleh melompat dalam halaman yang sama. Prinsip pelaksanaan adalah untuk menambah atribut id pada elemen yang ditentukan dalam halaman, dan kemudian melompat ke elemen dalam halaman dengan menambahkan titik utama pada pautan.

Ia juga sangat mudah untuk melaksanakan lompatan mata utama dalam Vue. Mula-mula kita perlu menambah id unik pada elemen yang ingin kita lompat, contohnya:

<div id="example">这里是文本内容</div>

Kemudian kita boleh melompat dengan menambahkan titik utama yang sepadan pada pautan pada halaman:

<a href="#example">跳转到示例</a>

Kod untuk melaksanakan lompat anchor dalam Vue adalah seperti berikut:

this.$router.push({ path: '/', hash: '#example' })

Antaranya, $router ialah objek penghalaan yang disediakan dalam Vue-Router, path: '/' bermaksud melompat ke halaman semasa dan hash: '#example' Menunjukkan melompat ke id elemen yang ditentukan.

Dicapai secara pemrograman

Selain menggunakan mata penambat, kami juga boleh melaksanakan lompatan tempatan secara pemrograman. Kaedah pelaksanaan ini akan menjadi lebih fleksibel dalam beberapa senario khas.

Vue-Router menyediakan banyak API untuk melaksanakan navigasi program. Antaranya, API yang paling biasa digunakan ialah kaedah $router.push dan kaedah $router.replace. Kedua-dua kaedah boleh digunakan untuk melaksanakan lompatan halaman, tetapi kaedah pelaksanaannya sedikit berbeza. Kaedah

$router.push akan menambah URL halaman semasa pada sejarah penghalaan penyemak imbas dan memuatkan halaman baharu dengan URL baharu, dengan itu mencapai lonjakan halaman. Kodnya adalah seperti berikut:

this.$router.push('/path/to/destination')

Kaedah $router.replace tidak menambah rekod baharu pada sejarah penyemak imbas, tetapi secara langsung menggantikan URL semasa. Kodnya adalah seperti berikut:

this.$router.replace('/path/to/destination')

Jika kita ingin melaksanakan fungsi lompat setempat, kita boleh mendapatkan maklumat kedudukan elemen sasaran yang perlu dilompat dahulu, dan kemudian gunakan $router.push atau $router.replace kaedah untuk melaksanakan lompatan.

Untuk memberikan contoh praktikal, dalam aplikasi satu halaman, kita boleh melaksanakan fungsi "kembali ke atas". Mula-mula, kita perlu mendapatkan maklumat kedudukan elemen sasaran dengan menulis fungsi:

function getTargetPosition() {
  const target = document.querySelector('#target')
  if (!target) return null
  const targetRect = target.getBoundingClientRect()
  return {
    x: targetRect.left + window.pageXOffset,
    y: targetRect.top + window.pageYOffset
  }
}

Kemudian, kita boleh menambah butang "kembali ke atas" pada halaman tersebut Apabila pengguna mengklik butang, butang setempat lompatan boleh dicapai. Pemindahan:

<button @click="backToTop">返回顶部</button>

Kaedah Vue yang sepadan adalah seperti berikut:

methods: {
  backToTop() {
    const position = getTargetPosition()
    if (!position) return
    this.$router.push({ path: '/', query: { position } })
  }
}

Dalam kaedah ini, kami mula-mula mendapatkan maklumat kedudukan elemen sasaran, dan kemudian melaksanakan lompatan melalui kaedah $router.push. Ambil perhatian bahawa ini berbeza daripada lompatan titik anchor Dalam kaedah $router.push, kami menggunakan atribut query untuk menghantar maklumat kedudukan elemen sasaran.

Akhir sekali, dalam halaman sasaran, kita boleh mendapatkan maklumat kedudukan yang diluluskan melalui $route.query untuk menatal halaman ke kedudukan yang ditentukan:

mounted() {
  const { position } = this.$route.query
  if (position) {
    window.scrollTo(position.x, position.y)
  }
}

Dengan cara ini, kita Boleh merealisasikan fungsi lompat setempat dalam aplikasi satu halaman.

Ringkasan

Untuk lompatan tempatan dalam aplikasi satu halaman, kita boleh mencapainya dengan menggunakan mata sauh atau secara pemrograman. Antaranya, kaedah titik utama adalah lebih mudah dan lebih intuitif, tetapi mungkin mempunyai had dalam beberapa senario. Kaedah pengaturcaraan boleh mengawal tingkah laku lompat halaman dengan lebih fleksibel, tetapi kod pelaksanaan yang sepadan memerlukan lebih banyak kerja.

Atas ialah kandungan terperinci Vue melaksanakan lompatan tempatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!