Chế độ định tuyến hash là một phương pháp sử dụng ký hiệu thăng bằng (#) để nối đường dẫn định tuyến phía trước vào URL trình duyệt.

Một URL đầy đủ bao gồm: giao thức, tên miền, cổng, thư mục ảo, tên tệp, tham số và điểm gắn kết.

https://www.videocdn.vn/utils/page.html?user=456&code=456#section

• Giao thức: https
• Tên miền: www.videocdn.vn
• Cổng: 443 (mặc định cho https), 80 (mặc định cho http)
• Thư mục ảo: /utils
• Tên tệp: page.html
• Tham số: user=456&code=456
• Điểm gắn kết: section (giá trị sau #)

Mục đích của hash

Định tuyến

Khi giá trị hash thay đổi, sự kiện hashchange được kích hoạt, cho phép chúng ta lắng nghe sự kiện này để hiển thị giao diện người dùng khác nhau dựa trên giá trị hash, từ đó thực hiện việc chuyển đổi định tuyến.

Các cách thay đổi định tuyến:

• Sử dụng thẻ <a>
• Đặt lại location.hash hoặc location.href
• Nút điều hướng tiến/lùi của trình duyệt hoặc các phương thức như history.back, history.go, history.forward
• Phương thức mới trong HTML5: history.pushState, history.replaceState

<div>
  <a href="#trang-chu">Trang chủ</a>
  <a href="#bai-viet">Bài viết</a>
  <div id="noidung"></div>
</div>
<script>
  window.onhashchange = function(event) {
    var hash = window.location.hash;
    var noidung = document.getElementById('noidung');
    if (hash === '#trang-chu') {
      noidung.innerHTML = 'Trang chủ'; 
    } else if (hash === '#bai-viet') {
      noidung.innerHTML = 'Bài viết'; 
    }
  }
</script>

Định vị

Hash còn được gọi là điểm gắn kết, có thể kết hợp với ID của phần tử DOM để thực hiện việc di chuyển đến vị trí cụ thể trên trang.

<div>
<span id="diem-gan-ket">Điểm đến</span>
<a href="#diem-gan-ket">Nhấn để di chuyển</a>
</div>

Đặc điểm của hash

• Khi hash thay đổi, không có yêu cầu gửi đến máy chủ, không làm mới trang (hash là dấu hiệu của trang web, không được gửi cùng yêu cầu HTTP)
• Thay đổi hash sẽ kích hoạt sự kiện hashchange
• Thay đổi hash cũng cập nhật lịch sử trình duyệt

Lý do tại sao khi hash thay đổi, nó không chỉ kích hoạt hashchange mà còn popstate (sự kiện theo dõi thay đổi của đối tượng history).

Lưu ý:

1. Nếu hash thay đổi nhưng vẫn giữ nguyên giá trị cũ, sự kiện hashchange không được kích hoạt, nhưng popstate vẫn thực thi (khi sử dụng location.href, sự kiện này được kích hoạt, trong khi sử dụng location.hash thì không, cả hai đều không tạo ra mục lịch sử mới).
2. Dù giá trị hash mới trùng với giá trị hiện tại, phương thức history.pushState vẫn tạo ra mục lịch sử mới.