點燈坊

失くすものさえない今が強くなるチャンスよ

タグ : 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。

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 之 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 基礎概念

Vue 雖然由 Component 所構成,為了模擬出不同頁面有不同網址,Vue 官方也提供了 Vue Router,這是前端自己的 Route,有別於後端的 Route。