建站
咨詢
售后
建站咨詢
新聞中心
AICube 開放GPT-4給大家使用以及AI工具助手，可以簡化大家生圖的的prompt。
成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網(wǎng)站制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的沈北新網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！
布局是中大型網(wǎng)站或應用的基礎。
假設你正在創(chuàng)建一個網(wǎng)頁應用，它包括主頁、營銷頁面和應用頁面：
- 希望主頁擁有獨特的布局
- 希望您的營銷頁面有側(cè)邊欄或其他任何東西
- 希望您的應用頁面具有常見的元素，如警告消息、錯誤消息、特定的標題、導航等等
你不會想要為每一頁重復所有的工作，對吧？
與Nuxt不同，Vue 3并沒有內(nèi)置的布局系統(tǒng)，但是別擔心，這里將向你展示3種簡單的方法來實現(xiàn)這一點。
1、將布局導入為常規(guī)組件以創(chuàng)建布局系統(tǒng)
這是創(chuàng)建布局系統(tǒng)的最簡單方法，但其靈活性較差。為了簡化解釋，我們就用我上面的例子來說明吧。
我們有5頁：
- 首頁（將有特定的布局）
- 關于和聯(lián)系（將具有營銷布局）
- Inside1和Inside2（將擁有應用程序布局）
我們將創(chuàng)建一個名為“l(fā)ayouts”的文件夾，在其中我們將創(chuàng)建包含插槽的三個布局組件。
然后，你只需像這樣在每個頁面組件中導入你需要的布局：
這種方法存在兩個主要問題：
- 需要在每個頁面中導入布局，當然，你可以將這些組件設為全局的，但你仍然需要每次手動包裝你的內(nèi)容。
- 每次路由更改時，布局都將被卸載并銷毀，即使下一個路由使用相同的布局。
這會對性能產(chǎn)生一點影響，但真正的問題是，即使它們使用相同的布局，你也無法在一個路由到另一個路由之間保持狀態(tài)。
2、利用Vue Router，路由的元屬性，以及動態(tài)組件來創(chuàng)建布局系統(tǒng)
為了避免在每個頁面中導入布局，我們可以選擇在路由器中一次性導入，然后為每個路由分配其關聯(lián)的布局。
如此處所示，我們直接將每個布局組件對象與每個路由的元數(shù)據(jù)屬性關聯(lián)。我們只導入了一次所有的布局。
為了避免布局被卸載和破壞，我們將把布局放在頁面之上，而不是放在頁面內(nèi)部。
為了將布局置于頁面之上，我們在App.vue組件中創(chuàng)建了一個動態(tài)組件。
在模板中，我們可以通過$route訪問當前的路由，并且在每個路由上，我們都可以訪問其元屬性，這意味著我們可以訪問之前設置的布局組件對象。
如果路由在元對象上沒有布局屬性，我們將回退到使用DIV標簽的字符串。
我們只需導入一次布局，無需在每個頁面中導入或包裝布局，現(xiàn)在，我們不會有性能問題，而且在從具有相同布局的兩個路由導航時，我們可以保持狀態(tài)。
所以，我的主頁組件現(xiàn)在看起來像這樣：
無需再包裝任何東西；所有的事情都在App.vue中處理，圍繞的
這種方法在大多數(shù)使用場景中都有效，但它存在一個問題。
布局只有在 route 改變時才會變化。
如果你需要在不改變路由的情況下動態(tài)改變布局，那么這種方法將不起作用。只有在少數(shù)情況下，你可能會想要動態(tài)地改變布局，但這是有可能發(fā)生的。
例如：
- 在一段時間后顯示一個鎖定的頁面
- 為了顯示一個離線頁面
- 為了顯示錯誤頁面
那些示例可以通過全屏 modal 系統(tǒng)來實現(xiàn)，但是 modal 很容易通過控制臺從DOM中刪除。
3、使用 ShallowRef，Provide，Inject 以及 Vue Router 的 afterEach鉤子來創(chuàng)建布局系統(tǒng)
為了能夠在任何地方更改布局，而不僅僅是在路由更改時，我們需要在整個應用程序中共享布局的狀態(tài)。
我們可以使用 Vuex 或 Pina 來實現(xiàn)這個功能，但在這里我們還是保持簡單吧。
我們將使用Vue的原生響應性系統(tǒng)，配合組合api。
以下是步驟：
- 在App.vue中，我們將創(chuàng)建一個布局常量，該常量包含一個shallowRef以保存當前的布局組件。
- 在一個單獨的文件中，我們將創(chuàng)建一個包含每個布局名稱及其組件的鍵/值對的對象。
- 在App.vue或其他地方，我們將使用路由器的afterEach鉤子來監(jiān)聽每次路由變化，以動態(tài)地改變當前的布局。
- 在App.vue中，我們將向其后代提供布局常量，以便App.vue的樹中的任何組件都可以注入布局常量來改變其值。
- 在路由中，我們將把元數(shù)據(jù)上的每個布局屬性更改為僅包含要選擇的布局名稱的字符串。
那么，這里是第二步，一個包含所有布局并作為對象展示的文件：
現(xiàn)在我們也可以將路由中的元數(shù)據(jù)僅更改為字符串，因為它們將映射到上述對象：
現(xiàn)在讓我們把所有這些結合在一起：
我們?yōu)槭裁词褂?nbsp;shallowRef 而不是 ref？
由于我們正在存儲一個組件，這是一個包含許多嵌套值的復雜對象，使用 ref 會導致性能問題。
這也是不必要的，因為我們只需要知道整個組件何時發(fā)生了變化，而不是嵌套值何時發(fā)生了變化。
那么，我們?nèi)绾卧诼酚善髦鈩討B(tài)改變布局呢？嗯，隨處都可以！
以下是一個例子，展示了 Home 布局可以通過一鍵點擊進行更改。
如你所見，我們現(xiàn)在可以注入并訪問布局的狀態(tài)，并將其更改為我們想要的任何組件。多虧了響應性，它將動態(tài)地改變App.vue中的組件。
如前所述，對于共享狀態(tài)，我們可以使用Vuex或Pinia來做同樣的事情，但對于大多數(shù)情況來說，這已經(jīng)足夠了。
本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。
分享標題：是的，這里有三種使用Vue3創(chuàng)建多布局系統(tǒng)的方法
分享網(wǎng)址：http://www.5511xx.com/article/coddoeg.html
