Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。

職場

學習

以行動支持創作者！付費即可解鎖

是一隻喜愛前端勇往直前的霹靂酷樂貓

Vue Router 動態路由，假設有一個賣場，裡面有 100 個商品，我們不可能針對它們創 100 對應的路由，因此我們需要一個動態路由，利用"路徑帶參數"的方式來撈取商品的資訊。

平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。

此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找

這系列是我在 2023 六角學院 Vue作品實戰班的筆記，筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ，其中包含單筆資料、多筆資料。

2023 Vue直播班筆記 - 動態路由Props，接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。

這次要講的是 $route 及 $router 的區別，看似相似的兩個東西，其實應用時機也大不相同，以下以簡單的幾個例子舉例。

VUE為單向資料流的框架，在鄰近層級之間我們可以依靠 props 由父層向子層來傳遞需要的資料，然而遇到跨層級的架構時，雖然也是可以一層層傳進去，只是這會造成多餘的處理及凌亂的程式碼，因此才有了 "provide" 來解決我們跨層級的需求。



層級展示圖



我們在實作中，難免會遇到在不同組件中，卻有需求相同的資料格式，因此 mixins 可以達到我們的需求，除了 data 以外也包含了 methods 可以共用，舉例來說，學生資料可能會在，班級跟社團內被使用，當我們要撰寫元件時，就可以省略多餘的 data 定義。

自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。

這系列是我在 2023 六角學院 Vue作品實戰班的筆記，筆記以本人理解的方式記錄。此篇主題為 Slot插槽 ，其中包含默認、具名、語法糖。