2023 Vue直播班筆記 - Vue Router及具名視圖
更新於 2024/05/17閱讀時間約 1 分鐘
筆記僅以個人清楚理解的方式記錄
前言
對於自己來說，沒接觸到框架之前想要切換部分區塊，都是 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
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
從 Vue 班畢業已經 1 個多月，最近也轉職成功，終於有機會把這段歷程記錄下來，當作一個里程碑。此次參加 Vue 班，心境上最大的不同，大概是知道自己即將在完課後，踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品，我就能提早出發。
▍學習狀況
雖然先前有稍微玩過 Vue，但也早已
大家好，我是鱈魚。（＾∀＾●）ﾉｼ
Vue 3.3 終於新增了泛型元件（Generic Component），這讓我們可以在 TypeScript 環境中得到更準確的型別提示。( •̀ ω •́ )✧
讓我們一起來看看吧！
組件之間的通信是 Vue 應用開發中的一個重要方面。Vue 提供了一種名為事件發射（emit）的機制，讓子組件能夠向父組件發送消息。本文將介紹 Vue 中的事件發射（emit）機制，並通過實際範例演示其用法。
在 Vue 中，組件是構建應用程式的基本單位，而 props 是組件間傳遞資料的主要方式之一，本文將介紹 Vue 中的 props，並通過實際範例展示如何使用 props 實現組件間的資料傳遞。
v-bind 指令是最常用的指令之一，它用於將資料綁定到 HTML 屬性。本文將介v-bindnd指令的使用方法，並透過實際範例幫助你理解v-bindbind 指令。
v-model 指令是 Vue 中一個非常重要的功能，它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。
在Vue中，v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法，並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
指令(Directives)是 Vue 中一個重要的概念，它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令：v-if 和 v-show，並通過實際範例來解釋它們的不同之處和使用場景。
為什麼會參加這個課程
2022年是個不一樣的年，因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。
Vue直播班的心得
前兩週其實都還跟得上，但到了第三週對我而言確實感覺有些難了啊～正在心裡徬徨第三週
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
從 Vue 班畢業已經 1 個多月，最近也轉職成功，終於有機會把這段歷程記錄下來，當作一個里程碑。此次參加 Vue 班，心境上最大的不同，大概是知道自己即將在完課後，踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品，我就能提早出發。
▍學習狀況
雖然先前有稍微玩過 Vue，但也早已
大家好，我是鱈魚。（＾∀＾●）ﾉｼ
Vue 3.3 終於新增了泛型元件（Generic Component），這讓我們可以在 TypeScript 環境中得到更準確的型別提示。( •̀ ω •́ )✧
讓我們一起來看看吧！
組件之間的通信是 Vue 應用開發中的一個重要方面。Vue 提供了一種名為事件發射（emit）的機制，讓子組件能夠向父組件發送消息。本文將介紹 Vue 中的事件發射（emit）機制，並通過實際範例演示其用法。
在 Vue 中，組件是構建應用程式的基本單位，而 props 是組件間傳遞資料的主要方式之一，本文將介紹 Vue 中的 props，並通過實際範例展示如何使用 props 實現組件間的資料傳遞。
v-bind 指令是最常用的指令之一，它用於將資料綁定到 HTML 屬性。本文將介v-bindnd指令的使用方法，並透過實際範例幫助你理解v-bindbind 指令。
v-model 指令是 Vue 中一個非常重要的功能，它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。
在Vue中，v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法，並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
指令(Directives)是 Vue 中一個重要的概念，它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令：v-if 和 v-show，並通過實際範例來解釋它們的不同之處和使用場景。
為什麼會參加這個課程
2022年是個不一樣的年，因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。
Vue直播班的心得
前兩週其實都還跟得上，但到了第三週對我而言確實感覺有些難了啊～正在心裡徬徨第三週