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

閱讀時間約 1 分鐘
筆記僅以個人清楚理解的方式記錄

前言

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


環境

這邊皆以圖文解釋

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

raw-image


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

raw-image


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

raw-image


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

raw-image
raw-image


具名視圖

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

raw-image


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

raw-image


  • joker
  • 2024/02/19
2會員
19內容數
是一隻喜愛前端勇往直前的霹靂酷樂貓
留言0
查看全部
發表第一個留言支持創作者!
Joker Cat 的其他內容