用 Vue Router 實作網頁切換(中)
📝 回顧上個章節：用 Vue Router 實作網頁切換(上)
搭建好 Vue Router 專案環境並新增自定義頁籤 Travels
這章節將延續上個章節，為專案新增客製化樣式，並延伸介紹嵌套路由！
📋 目錄
[實作] 客製化 Home.vue & About.vue 頁面
step 1 改變 Router Link 的顏色
有關 routers 都寫在 App.vue 檔案，下方 style 中 #nav a & #nav a.router-link-exact-active 可依個人喜好修改 🔮
這邊改成 #302e28 #998f7f ，分別是深淺咖啡色。
step 2 調整 Home.vue 頁面
Home.vue 頁面 <template> 區塊把 img，HelloWorld 元件以及整個 <script> 刪除。此時查看瀏覽器 Home 畫面會是空的。
至 Unsplash 網站下載 圖片素材，將圖片放置專案 src/assets 資料夾中，並將其重新命名為 world-map.jpg 📍
🔖 補充說明
Unsplash提供免費且無著作權的高解析度圖片，使用者不用標註原作者名稱，個人專案或商業使用皆可自由選擇Unsplash所提供的免費圖片。Home.vue 加上圖片以及設定樣式。
Home 頁面完成，可以縮放視窗大小。雖然沒有細緻的響應式設計(RWD)，不過此系列文章著重在 Vue router 學習，基本樣式看起來還不錯 👏
step 3 調整 About.vue 頁面
目前的 About 頁面只有預設的一行字。 Travels 專案主要記錄個人旅遊足跡，所以將說明修改成符合主題，並加上一句名言。
About 頁面完成，由於沒有新增樣式設定，畫面屬於簡約風 🗿
Nested Routes 嵌套路由介紹
路由設定是讓畫面隨網址渲染到對的頁面。依循上方設定，header 區塊是固定保持顯示的區塊，而<router-view /> 即是畫面渲染的內容。
實際生活中的應用界面，通常由多層嵌套的組件組合而成。舉目前的範例，想在 Travels 頁面加上 placeA & placeB 區塊。在原本 Travels 的 router 設定底下加入 children (placeA & placeB 如同 Travels 的小孩) 👶
<router-view />Travels.vue 新增 <router-link> & <router-view />
接著分開撰寫 PlaceA & PlaceB 元件，並引用至 router/index.js 中， placeA & placeB 區塊即劃分完成。
下一個部分將實作 Travels.vue 嵌套路由調整。
🔖 補充說明
Redirect:(以上述範例為例)某些情況會希望在進入/travels畫面直接被重新導向/travels/placeA，在設定route的地方，travel區塊加上redirect:"/travels/placeA"即可[實作] 調整 Travels.vue 嵌套路由
這個部分會先運用剛剛學習的嵌套路由，將網頁的架構切分好，再進行客製化內容的步驟。在開工前，構思 Travels 頁面會有三個小頁籤 📃，分別是：西班牙(Spain)、芬蘭(Finland)、捷克(Czech)。
step 1 新增三個 Vue 頁面檔案
在 components 資料夾中，新增 Spain.vue、Finland.vue、Czech.vue 檔案。
以下為 Spain.Vue 檔案內容(其他兩個檔案請參考完成)。
step 2 修改 Travels.vue 檔案
將原本 placeA 與 placeB 的 <router-link> 置換成國家，並將 <p> 標籤內容修改。
step 3 修改 index.js 檔案
在 router/index.js 檔案上方引用三個國家的元件，並將下方 placeA 與 placeB 的 route 設定置換。完整檔案如下：
這邊可以留意一下，在 router 設定 history 模式。
Vue 預設使用 hash 模式，在 URL 會出現 ＃井字號，較不美觀且不符合 URL 規範。Hash 模式通過錨點值的改變，渲染指定 DOM 位置的不同內容。而在 History 模式，當用戶手動輸入網址或刷新頁面時會發起 URL 請求，需和後端配合。
依循上述步驟，已完成 Travels.vue 的嵌套路由設定。
目前專案的畫面如下：
[實作] 客製化 Travels.vue 頁面
這個樣式部分可以依個人喜好做編輯 👾
step 1 修改 Travel 分頁樣式
新增 div class travel-router，包在三個 <router-link> 外層，並在下方加上樣式設定。
step 2 Spain.vue 新增內容及樣式
新增圖片(圖片來源皆為 Unsplash 網站)，設定圖片的大小，加上文字說明。完整程式碼如下：
step 3 Finland.vue 新增內容及樣式
仿製 Spain.vue 的作法，完成 Finland.vue 檔案，完整程式碼如下：
step 4 Czech.vue 新增內容及樣式
仿製 Spain.vue 的作法，完成 Czech.vue 檔案，完整程式碼如下：
依循上述步驟，瀏覽器網址輸入 http://localhost:8080
畫面如下方影片所示 👀 請特別留意 URL 的切換
畫面看起來有內容多了 🙌
在最後一個章節，將會製作404 Not Found Page，以及返回上一頁的按鈕！
🚪 前往下一章節：用 Vue Router 實作網頁切換(下)
Let’s travel together.🌏
