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 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
先前提到 Quasar 的 Dialog Plugin 很好用，再讓我補充一個用法。
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
切換頁面卡卡有很多種原因，這裡舉的例子只針對元件太大的情境。
除了想辦法拆分外，還有一個方法就是利用 Vue 的 Async Component。
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
樣板模式的定義極為簡單，卻是大型系統程式、WEB/APP應用框架的設計核心，完美展現設計模式的價值: 簡單、高效、強大。
從 Vue 班畢業已經 1 個多月，最近也轉職成功，終於有機會把這段歷程記錄下來，當作一個里程碑。此次參加 Vue 班，心境上最大的不同，大概是知道自己即將在完課後，踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品，我就能提早出發。
▍學習狀況
雖然先前有稍微玩過 Vue，但也早已
在Vue中，v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法，並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
指令(Directives)是 Vue 中一個重要的概念，它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令：v-if 和 v-show，並通過實際範例來解釋它們的不同之處和使用場景。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
先前提到 Quasar 的 Dialog Plugin 很好用，再讓我補充一個用法。
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
切換頁面卡卡有很多種原因，這裡舉的例子只針對元件太大的情境。
除了想辦法拆分外，還有一個方法就是利用 Vue 的 Async Component。
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
樣板模式的定義極為簡單，卻是大型系統程式、WEB/APP應用框架的設計核心，完美展現設計模式的價值: 簡單、高效、強大。
從 Vue 班畢業已經 1 個多月，最近也轉職成功，終於有機會把這段歷程記錄下來，當作一個里程碑。此次參加 Vue 班，心境上最大的不同，大概是知道自己即將在完課後，踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品，我就能提早出發。
▍學習狀況
雖然先前有稍微玩過 Vue，但也早已
在Vue中，v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法，並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
指令(Directives)是 Vue 中一個重要的概念，它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令：v-if 和 v-show，並通過實際範例來解釋它們的不同之處和使用場景。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。