用 Vue Router 實作網頁切換(下)
📝 回顧第一章節：用 Vue Router 實作網頁切換(上)
📝 回顧第二章節：用 Vue Router 實作網頁切換(中)
Travels 專案在上個章節加入嵌套路由以及內容，最後這章節將新增返回上頁按鈕，以及 404 Not Found 頁面。
📋 目錄
[實作] 返回上一頁按鈕
利用 Vue Router 提供的 this.$router去操作返回上一頁的動作 🔙
step 1 新增 GoBack.vue 元件
在畫面 header的下方，新增 Go Back 按鈕。按鈕綁定了點選 click 動作，呼叫 goBack() 方法 this.$router.go(-1) ，返回上一頁。完整 GoBack.vue 程式碼如下：
step 2 修改 App.vue 檔案
創建好 GoBack 元件，在 App.vue 檔案做引用。完整 App.vue 程式碼如下：
依循上述步驟，已完成返回上一頁的按鈕及功能 👏
目前專案的 Home 畫面如下：
[實作] 404 Not Found 頁面
當使用者嘗試連結不存在的網頁時，會出現 404 Not Found 頁面 ⚠️
step 1 新增 NotFound.vue 頁面
在 views 資料夾中加入 NotFound.vue 檔案，告知使用者輸入錯誤的URL。這邊提供兩種寫法：(1)<router-link>寫法 (2)this.$router.push()寫法，可以擇任一使用。
📍 寫法1<router-link>設定 <router-link :to="{name:'Home'}"> ，其中to屬性的參數也可以改用path:'/'，提供 Home 頁面的超連結。
完整 NotFound.vue 程式碼如下：
📍 寫法2this.$router.push()新增 goHome() 方法，被觸發時回傳 this.$router.push({name:'Home'}) ，其中 push 也可以改用path:'/'，點選 home 即會呼叫導向 Home 頁面。
完整 NotFound.vue 程式碼如下：
step 2 修改 index.js 檔案
在 router/index.js 檔案 router 加上設定。星號字元 *代表含有零或多個字元的變數字串，防止對應到其他正確畫面前就被星號攔截，故 not found 設定需放在 route 中最後的位置。
🔖 補充說明
Vue Router同一個路徑可以匹配多個路由，此時，匹配的優先級就按照路由的定義順序：路由定義得越早，優先級就越高。
此時開啟瀏覽器，輸入不存在的 URL，順利導向 404 Not Found 頁面。然而網址列仍留著錯誤的 URL，可以藉由下方 redirect 設定導向 /404 。
修改完設定，再次輸入不存在的 URL，除了畫面導向 404 Not Found 頁面，網址也修改成 http://localhost:8080/404 👏
下個段落將介紹全局前置守衛 (router.beforeEach)，會再藉由 404 Not Found 範例做延伸練習。
全局前置守衛 router.beforeEach 介紹
Vue Router 提供多種導航守衛用來跳轉或取消的方式守衛導航 👮
這邊特別介紹全局前置守衛 (router.beforeEach)。
const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {
// ...
})
beforeEach 每個路由要被執行之前，都會先經過這裡。傳入三個參數：
to要前往的路由位置。from從哪個路由位置進來，如果沒有，預設是null。next()繼續往下執行的回呼函式，必須呼叫它才能往下執行。
其中 next() 回呼函式，可接受呼叫方式有:
(1)直接呼叫 next()
(2) next(false) 中斷此路由
(3)next('/')或者next({ path: '/' }) 當前的導航被中斷，然後進行一個新的導航(也可以使用 name 對應)
(4) next(Error) 傳入一個 error 實例，路由會被中斷，然後發事件給 router.onError()
404 頁面加上 router.beforeEach
上個段落的結尾，運用 redirect 將路由導向 /404 。可以運用 router.beforeEach 做到一樣的功能。
將 route 中 redirect 部分註解掉，再至下方新增 router.beforeEach。藉由 to.matched.length 判斷有無對應到設定好的路由，進行 next() 判斷下一步。完整的 router/index.js 程式碼如下：
依循上述步驟， 可以做到 redirect 一樣作用。輸入不存在的 URL，除了畫面導向 404 Not Found 頁面，網址也修改成 http://localhost:8080/404 👏
🔖 補充說明
Vue Router提供多種導航守衛用來跳轉或取消的方式守衛導航。像是beforeEnter、beforeResolve等，詳細可參閱導航守衛(Navigation guards)官方文件。導航守衛最常用於登入機制檢查，在進行頁面跳轉前確認使用者登入身份與權限。Vue Router 系列小結
先認識 Vue Router 並搭建環境，再經由一步步實作對 Vue Router 設定更熟悉。此系列練習大多著墨在基礎概念，若想延伸學習可以參考 Vue Router 官方文件，或官方提供 Vue School (Vue Router for Everyone)教學影片。
最後，附上 Travels 專案的 GitHub 檔案連結 🔗 ，專案資料夾名稱：vue-router-practice-Travels 。有任何指點或建議都可以在下方留言～🙏
🚠 Thanks for taking the journey.
