JS作品實戰-Week6-建立路由
本週重點
- 使用 Vue Cli 完成路由設定
- 在 Vue Cli 中完成登入驗證
使用者故事
新建完整的路由，並提供導覽進入大部分頁面（進入頁面僅需要文字，不必加入實際的頁面）
前台頁面
- 首頁 /
- 關於我們 / about
- 產品列表 / products
單一產品頁面（LV 2）/product - 購物車 / cart
- 結帳
- 結帳完成
後台頁面
- 登入頁面（進階 LV3）/ login
- 產品管理頁面 / admin / products
- 優惠券管理頁面 / admin / coupons
- 訂單管理頁面
- 圖片儲存列表
建立 Router 三步驟
- 開 .vue 檔案（.vue 檔名首字要大寫 [淺規則]。emmit: with 快速生成模板）
- 建立路由（router / index.js）
- 加入路徑（回到 .vue檔並掛上 router-link 元件）
以下圖片為此三步驟：
若要在 Products 元件上，建立新的資料時，可以加上 script。
切回頁面就會看到剛才宣告好的 products 陣列，並且可以看到 router-view 是對應到哪一個檔案（下圖橘色底處）。
巢狀路由
建立步驟
- 新增 dashboard 資料夾，並開 .vue 檔案
- 建立路由（router / index.js）
- 加入路徑（回到 .vue檔並掛上 router-link 元件）
admin 會套用外層的版
直接貼上 router-view 的元件到剛才建立的 Dashboard.vue。
然後再開啟 Products.vue 的檔案
回到 index.js 在 path: ‘/admin’ 這個物件內新增 children 屬性，他是一個陣列，並和外層結構幾乎相同，陣列內包物件，物件內屬性一樣為 path 和 component，唯一不同的是 path 內的路徑不須加上 / ，如下圖所示。
回到頁面上輸入網址 admin/products 就會進入到後台產品列表。
回到 App.vue 加上 router-link，連結網址為 /admin/products
將前台、後台拆開
router-view 結構圖解
使用 AJAX 取得遠端資料，並將回傳資料成現在畫面上
開啟單一產品 Product.vue 檔、建立路由、加入路徑 router-link（同上述三步驟）
加入路徑 router-link
呈現畫面如下，點擊「連結」會切換頁面到單一產品頁面 Product.vue
動態路由
使用動態連結，連結到單一產品頁面，每單一產品頁面都會使用 AJAX 重新取得資料。
寫法
在路徑後方加上 :參數名稱，此動態路由會來取得產品的 id，透過 id 來取得單一產品的資料。如下圖所示：
並將 router-link 改成動態屬性 :to=” ”，因為連結網址會做動態的切換，連結不能被寫死，所以使用樣板字面值的方式來插入變數。
<router-link :to=”`/product/${item.id}`”>連結</router-link>
點擊產品頁面的連結後，會發現網址多了一串此單一產品的 id，便可利用此 id 再去取得此產品的詳細資料。
屬性 $route 和方法 $router
- 屬性 $route 取值：使用
this.$route可取得所有參數，this.$route.params.id可取得參數 id 的值（先前在 index.js 建立的動態路由path: ‘/product/:id’，所定義的參數 id）。 - 方法 $router 呼叫方法：使用
this.$router可取得所有方法，方法都藏在「原型」層。
屬性 $route 取值
到 Product.vue 建立 script 把 id 取出來，並再取一次遠端資料。
console.log(this.$route) 結果如下
console.log(this.$route.params.id); 結果如下
再次取得遠端資料，使用 AJAX 取前台單一產品列表。注意：宣告單一產品 id 時必須使用解構賦值 （airbnb 規定）。
const { id } = this.$route.params;
查看 console 便可取得單一產品的詳細資料。
現在就可以將這一筆資料成現在畫面上。
方法 $router 呼叫方法
使用方法 $router 進入單一產品頁面。這邊示範用使用 button 按鈕觸發方法。（注意：若是使用 a 連結觸發方法時，必須補上 @click.prevent，避免網址連結被預設值href=”#” 覆蓋掉 router 路徑，就會無法取得此產品的 id）
<a href=”#” @click.prevent=”goPage(item)”>進入頁面</a>
顯示頁面如下：
使用 this.$router.push(`/product/${item.id}`); 代入單一產品 id 進入特定的頁面。（注意：方法是建立在 Products.vue 所有產品列表上。）
呈現畫面結果和 $route 取值是相同的。
避免進入錯誤頁面
避免使用者輸入錯誤網址時，進入到錯誤頁面，當輸入路徑皆沒有符合的 router 路徑時，則自動重新導向回首頁。
登入驗證
補充內容
SPA ( Single-page application )
資料是靠前端操控 API 做渲染，實際沒有刷新頁面（只是加入讀取效果，API 尚未取得資料時），只切換路由，使用者體驗較好，不會有明顯切換頁面的感覺。
網址 http://…./#/router
#前面的網址是由後端所控制。 #後方的網址為前端所模擬的
