2023 Vue直播班筆記 - Vue Router及具名視圖

筆記僅以個人清楚理解的方式記錄

前言

對於自己來說，沒接觸到框架之前想要切換部分區塊，都是 display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度，一堆天花亂墜的程式碼充斥著你的編輯器，而 Vue Router 完美的解決了我們的困擾，不再需要絞盡腦汁寫一堆 CSS 了。

環境

這邊皆以圖文解釋

我們一樣先建立好環境及所需畫面，把 App.vue 刪到剩下 <router-view></router-view> 做為路由畫面顯示的區塊

而 index.js 為 router 的設定，我們可以很清楚的知道路徑為 "/" 時，顯示的組件為Index.vue，此組件程式碼如下圖。

組件內有 2 個 <router-link> ，定義在某路徑下的路由，也稱為 "巢狀路由" ，也就是說路徑為 "/" 時會將 Index.vue 掛在 App.vue 的 router-view 上面，而 Index.vue上的 router-view 會讓切換pageA跟B時在此顯示，因此我們執行專案時的畫面會長這樣。

當我們按下 pageA 跟 pageB 按紐時如下

具名視圖

具名視圖為單元件內有多個 router-view 的情況，元件插入時不知道要插入哪個裡面，因此我們需要將其命名，更改新增範例程式碼如下圖

明顯看到我們增加了新的 vue 檔為 pageC 以及 Left.vue 跟 Right.vue 來做為具名展示，而 router 內 /pageC 內有子路由方別命名為 Left 與 Right ，這樣我們再 調用路徑 /pageC/LeftRight 時就可以 呈現具名路由 了。

• joker
• 2024/02/19