2023 Vue直播班筆記 - Vue Router及具名視圖
閱讀時間約 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 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
從 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直播班的心得
前兩週其實都還跟得上，但到了第三週對我而言確實感覺有些難了啊～正在心裡徬徨第三週
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
從 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直播班的心得
前兩週其實都還跟得上，但到了第三週對我而言確實感覺有些難了啊～正在心裡徬徨第三週