# สัปดาห์ที่ 10.4 - Hash-Based Routing
## บทนำ
**Hash-Based Routing** คือวิธีการนำทางในแอปพลิเคชัน SPA โดยใช้ URL hash (`#`) เพื่อระบุหน้า/สถานะปัจจุบัน โดยไม่ต้องรีโหลดหน้า
ตัวอย่าง URL:
- `https://myapp.com/#/home`
- `https://myapp.com/#/users/123`
- `https://myapp.com/#/settings`
---
## 1. ความเข้าใจพื้นฐาน
### URL Components
```
https://myapp.com:3000/path?query=value#/page/123
│ │ │ │ │ │
└─ Protocol │ │ │ └─ Fragment/Hash
│ │ └─ Query String
│ └─ Path
└─ Domain:Port
Hash (Fragment) คือที่บอก SPA ว่าจะแสดงหน้าไหน
```
### ข้อมูลใน Window
```javascript
// ถ้า URL คือ: https://myapp.com/#/users/123?sort=name
window.location.href; // ค่า URL ทั้งหมด
window.location.hash; // "#/users/123"
window.location.pathname; // "/"
window.location.search; // "?sort=name"
window.location.protocol; // "https:"
window.location.host; // "myapp.com"
```
---
## 2. Event Listener - ฟังการเปลี่ยน Hash
### ตัวอย่างพื้นฐาน
```javascript
// ฟังเมื่อ hash เปลี่ยน
window.addEventListener("hashchange", function () {
console.log("Hash changed to:", window.location.hash);
// ทำอะไรบางอย่างเมื่อ hash เปลี่ยน
});
// เมื่อหน้า load ครั้งแรก
window.addEventListener("load", function () {
console.log("Page loaded");
handleRoute(); // เรียกฟังก์ชัน routing
});
```
### Practical Example
```javascript
function handleRoute() {
const hash = window.location.hash.slice(2); // ตัด "#/"
console.log("Current route:", hash);
if (hash === "home" || hash === "") {
showHome();
} else if (hash === "about") {
showAbout();
} else if (hash.startsWith("users")) {
const id = hash.split("/")[1];
showUserDetail(id);
}
}
// สมัครรับเหตุการณ์
window.addEventListener("hashchange", handleRoute);
window.addEventListener("load", handleRoute);
```
---
## 3. URL Patterns
### Basic Routes
```javascript
// ✅ Simple routes
#/home → Route: home
#/about → Route: about
#/contact → Route: contact
// ❌ ไม่มี hash ก็ได้ (ใช้ '' หรือ 'home')
```
### Routes ที่มี Parameters
```javascript
// ✅ พารามิเตอร์ใน path
#/users/123 → Route: users, ID: 123
#/posts/456/edit → Route: posts, ID: 456, Action: edit
// ✅ Query string
#/search?q=javascript&sort=date
```
### Parser Function
```javascript
function parseHash() {
const hash = window.location.hash.slice(2); // ตัด "#/"
const parts = hash.split("/");
return {
page: parts[0] || "home",
id: parts[1],
action: parts[2],
};
}
// ใช้งาน
const route = parseHash();
console.log(route); // { page: 'users', id: '123', action: 'edit' }
```
### Advanced Parser
```javascript
class Router {
static parse() {
const hash = window.location.hash.slice(2);
const [page, ...params] = hash.split("/");
const query = new URLSearchParams(window.location.search);
return {
page: page || "home",
params: params,
query: Object.fromEntries(query),
};
}
}
// ใช้งาน
const route = Router.parse();
console.log(route);
// {
// page: 'users',
// params: ['123', 'edit'],
// query: { sort: 'name' }
// }
```
---
## 4. Simple Router Implementation
### ตัวอย่างที่ 1: Router ง่ายๆ
```html
Simple Router
```
---
### ตัวอย่างที่ 2: Router ที่มี Dynamic Data
```html
Dynamic Router
```
---
## 5. Router Class - ขั้นสูง
```javascript
class SimpleRouter {
constructor() {
this.routes = {};
this.currentRoute = null;
this.setupListeners();
}
// ลงทะเบียน route
register(path, handler) {
this.routes[path] = handler;
}
// ตั้งค่า listeners
setupListeners() {
window.addEventListener("hashchange", () => this.handleRoute());
window.addEventListener("load", () => this.handleRoute());
}
// จัดการ route
handleRoute() {
const hash = window.location.hash.slice(2);
const path = hash.split("/")[0] || "home";
const params = hash.split("/").slice(1);
const handler = this.routes[path];
if (handler) {
this.currentRoute = path;
handler(...params);
} else {
console.warn(`Route not found: ${path}`);
}
}
// นำทางไปยัง route
navigate(path) {
window.location.hash = `#/${path}`;
}
}
// ใช้งาน
const router = new SimpleRouter();
router.register("home", () => {
document.getElementById("app").innerHTML = "Home Page
";
});
router.register("about", () => {
document.getElementById("app").innerHTML = "About Page
";
});
router.register("user", (id) => {
document.getElementById("app").innerHTML = `User #${id}
`;
});
// นำทาง
router.navigate("user/123");
```
---
## 6. Browser History & Back Button
### Back/Forward Navigation
```javascript
// ✅ Hash routing สนับสนุน back/forward โดยอัตโนมัติ
// เมื่อผู้ใช้กด back button เบราว์เซอร์จะเปลี่ยน hash โดยอัตโนมัติ
// แต่ถ้าต้องการ custom behavior:
window.addEventListener("hashchange", function () {
console.log("User navigated using back/forward button or URL");
});
```
### Browser History API
```javascript
// ใช้ History API แทน hash (ขั้นสูง)
// ต้อง server-side support
history.pushState(state, title, url);
history.replaceState(state, title, url);
history.back();
history.forward();
history.go(-1); // ไปศหลังหน้าหนึ่ง
window.addEventListener("popstate", (event) => {
console.log("URL changed:", event.state);
});
```
---
## 7. Query Parameters
```javascript
// URL: #/search?q=javascript&sort=date
function getQueryParams() {
const hash = window.location.hash;
const queryStart = hash.indexOf("?");
if (queryStart === -1) return {};
const queryString = hash.substring(queryStart + 1);
const params = new URLSearchParams(queryString);
return Object.fromEntries(params);
}
// ใช้งาน
const params = getQueryParams();
console.log(params); // { q: 'javascript', sort: 'date' }
// ตั้งค่า query params
function setQueryParams(obj) {
const query = new URLSearchParams(obj).toString();
window.location.hash = `#/search?${query}`;
}
setQueryParams({ q: "vue", sort: "popular" });
// URL กลายเป็น: #/search?q=vue&sort=popular
```
---
## 8. ตัวอย่าง: Complete SPA with Router
```html
Complete SPA
```
---
## 9. ข้อดี & ข้อเสีย Hash Routing
### ✅ ข้อดี
| ข้อดี | ลักษณะ |
| ----------------------- | ------------------------------- |
| **ง่ายต่อการใช้** | ไม่ต้อง server config |
| **ใช้ได้ทั้งเดสก์ท็อป** | ใช้ได้กับไฟล์ local |
| **Back button works** | เบราว์เซอร์สนับสนุนโดยอัตโนมัติ |
| **SEO-friendly URLs** | เหมาะกับ JS framework |
### ❌ ข้อเสีย
| ข้อเสีย | ปัญหา |
| ------------------------------ | --------------------------- |
| **SEO ยาก** | Search engine ยากจนเข้าหน้า |
| **URL ไม่สะอาด** | `#/page` แทน `/page` |
| **Server-side routing ไม่ได้** | ทำเฉพาะ client-side |
---
## 10. สรุป Hash-Based Routing
- **Hash** (`#/`) ใช้ระบุ route ใน SPA
- **hashchange event** ฟังการเปลี่ยน hash
- **URL parsing** แยก path และ parameters
- **Router class** ช่วยจัดการ routes
- **Browser history** สนับสนุน back/forward
- **ข้อดี**: ง่าย, ไม่ต้อง server config
- **ข้อเสีย**: URL ไม่สะอาด, SEO ยาก