# [ 想入門，我陪你 ] Re Vue 重頭說起｜Day 20：路由器應用範例： LightBox 燈箱 ###### tags: `Vue`、`Re:Vue 重頭說起`、`Alex 宅幹嘛` 5:30 Demo 範例 Ex: 發文的圖片群組中，點圖片，圖片放大變成LightBox，切換圖片時，網址會變 24:28 user flow 的幾種可能 注：Ｘ 代表不開 lightbox，V 代表開啟 light box - user -> Home -- X --> Pic -- X --> Pic - 26:32 => user -> **PicList**(FB文章) -- V(點擊圖片) --> Pic -- V(lightbox仍開著) --> Pic - 27:23 => user -> Pic -- X --> Pic -- X --> Pic > 26:36 用畫面解釋 user flow ![](https://i.imgur.com/ArGmKll.jpg) > 綠與藍箭頭是指， Pic 放置在 lightbox，把 Piclist 放置在 default，lightbox與default是router-view的name 28:04 用 meta 設定路由規則 31:08 開始使用 name 屬性去 * 設定兩塊 router-view ，一個叫 default，一個叫 light * 放 1 號 在Component 代表當時不需開 lightbox * 當 2 號顯示，lightbox下面的內容是原先的 1 號 default，以下圖來說是 PicList 元件 改放在 default，default 放在 lightbox 位置 44:15 Bug1: Home -> Pic2 背後居然自動出現背景 PicList Bug2: Home -> /pic1 -> Home -> /pic2 -> Home -> /picList -> /Pic1 -> /Pic2 -> /Pic1 -> /picList -> Home -> /Pic1(炸了！lightbox內出現picList) ``` 檢查現在 router 的狀態 $vm0.$route $vm0.$router ``` 1:00:45 補充功能 & FB => 關掉的lightbox仍能保留歷史紀錄，能上一頁下ㄧ頁，所以要記下切換分頁次數 [Code Link](https://codesandbox.io/s/vue-lightbox-bhw4l?file=/src/App.vue)