タグ : Vue Router
Hash Mode vs. HTML 5 Mode
當切換 URL 時，Vue Router 會避免對 Server 發出 Request ，直接由 JavaScript 去 render HTML，在 HTML 5 之前會使用 Hash Mode，現在會使用 HTML 5 Mode。
由 Vite 建立 Vue Router 專案
由於並不是所有的應用都會使用 Vue Router，因此 Vue 本身並不包含 Vue Router，而是以獨立 Package 形式存在，由 Vite 建立專案時可選擇是否使用 Vue Router。
使用 Dynamic Router Matching 以 Route 為參數
在實務上 Route 也會如 RESTful API 一樣，動態在 Route 中夾帶 Data，此時可使用 Dynamic Route Matching，而不用將 Route 寫死。
使用 $route 讀取 Query Parameter
目前實務上較少使用 Query Parameter 傳遞資料，而改用 Vue Router 與 Prop，若真的要使用，亦可使用 $route 讀取。
Vue Router 使用 Functional API
傳統 Vue Router 都以 this 使用，這使得 Extract Function 時還必須將 Vue Instance 傳進 Function，事實上 Vue Router 也能不使用 this，直接 Import Router 使用，甚至更進一步 Point-free。
如何對其他 Page 傳遞多值 ?
傳統對其他 Page 傳遞資料時，會以 Query String 形式，除了會暴露資料遭 Hacker 嘗試破解外，也不適合傳遞太多資料，若能將這些資料整合成 Object 傳遞，且不必出現在 URL，那就非常完美。
Vue Router 之 History Mode
目前我們在 Vue 的網址都會看到有 #，因為 Vue Router 預設使用 Hash Mode，若要拿掉 #，就要使用 History Mode。
Vue Router 之 Props
雖然我們可以使用 this.$route 去存取目前 Route，但開發 Component 時，你無法確認 User 是否使用 Vue Router，畢竟 Vue Router 是選配，也無法確認會用什麼 Params 或 Query String，比較好的方式還是回歸 Component 正統設計方式：使用 Props。
Vue Router 之 Named Routes
實務上我們不希望 <router-link/> 直接綁定到 Route，這樣將來 Route 改變時，會所有 <router-link/> 都要改，而希望綁定到 Name，這樣將來 Route 改變時，只要統一修改 route.js 即可，而不用每個 HTML Template 都修改。
Vue Router 之 Dynamic Route Matching
在實務上 Route 也會如 Restful API 一樣，動態在 Route 中夾帶 Data，此時可使用 Dynamic Route Matching，而不用將 Route 寫死。
Vue Router 基礎概念
Vue 雖然由 Component 所構成，為了模擬出不同頁面有不同網址，Vue 官方也提供了 Vue Router，這是前端自己的 Route，有別於後端的 Route。