useHash
Bagian # dari alamat halaman, yang bisa dibaca dan ditulis.
Hash sekarang: (kosong)
Alamat di bilah peramban ikut berubah, dan tombol kembali tetap bekerja.
Bagian # dari alamat halaman, yang bisa dibaca dan ditulis.
Menulis ke sini mengubah alamatnya, dan itu memicu hashchange yang lalu membaca balik nilainya — jadi satu sumber kebenaran, bukan dua yang harus dijaga tetap sama. Perubahan dari luar (tombol kembali, tautan #bagian, kode lain) ikut terbaca tanpa perlakuan khusus.
Kosong saat dirender di server: di sana tidak ada alamat yang bisa dibaca, dan # memang tidak pernah dikirim ke server oleh peramban mana pun.
Pemasangan
npx shadcn-vue@latest add @kliping/use-hash Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Ikut terpasang sendiri: is-browser, saat-terpasang, use-event-listener.
Salin dulu is-browser, saat-terpasang, target, use-event-listener — masing-masing memuat sumbernya di halamannya sendiri — lalu tempel berkas ini.
import { customRef } from 'vue'
import { isBrowser } from '@/lib/is-browser'
import { saatTerpasang } from '@/lib/saat-terpasang'
import { useEventListener } from '@/composables/use-event-listener'
export function useHash() {
let nilai = ''
let beritahu: (() => void) | undefined
const baca = () => (isBrowser ? window.location.hash : '')
const perbarui = () => {
const baru = baca()
if (baru === nilai)
return
nilai = baru
beritahu?.()
}
const hash = customRef<string>((track, trigger) => {
beritahu = trigger
return {
get() {
track()
return nilai
},
set(baru) {
if (!isBrowser) {
nilai = baru
trigger()
return
}
// Ditulis ke alamatnya, bukan ke variabelnya. `hashchange` yang
// menyusul akan membaca balik dan menyalakan pemberitahuannya, jadi
// nilai ini tidak pernah bisa menyimpang dari alamat yang sebenarnya.
window.location.hash = baru
},
}
})
saatTerpasang(perbarui)
useEventListener('hashchange', perbarui)
return hash
}API
export function useHash()