AICube 開放GPT-4給大家使用以及AI工具助手，可以簡化大家生圖的的prompt。

布局是中大型網站或應用的基礎。

假設你正在創建一個網頁應用，它包括主頁、營銷頁面和應用頁面：

• 希望主頁擁有獨特的布局
• 希望您的營銷頁面有側邊欄或其他任何東西
• 希望您的應用頁面具有常見的元素，如警告消息、錯誤消息、特定的標題、導航等等

你不會想要為每一頁重復所有的工作，對吧？

與Nuxt不同，Vue 3并沒有內置的布局系統，但是別擔心，這里將向你展示3種簡單的方法來實現這一點。

1、將布局導入為常規組件以創建布局系統

這是創建布局系統的最簡單方法，但其靈活性較差。為了簡化解釋，我們就用我上面的例子來說明吧。

我們有5頁：

• 首頁（將有特定的布局）
• 關于和聯系（將具有營銷布局）
• Inside1和Inside2（將擁有應用程序布局）

我們將創建一個名為“layouts”的文件夾，在其中我們將創建包含插槽的三個布局組件。

然后，你只需像這樣在每個頁面組件中導入你需要的布局：

這種方法存在兩個主要問題：

• 需要在每個頁面中導入布局，當然，你可以將這些組件設為全局的，但你仍然需要每次手動包裝你的內容。
• 每次路由更改時，布局都將被卸載并銷毀，即使下一個路由使用相同的布局。

這會對性能產生一點影響，但真正的問題是，即使它們使用相同的布局，你也無法在一個路由到另一個路由之間保持狀態。

2、利用Vue Router，路由的元屬性，以及動態組件來創建布局系統

為了避免在每個頁面中導入布局，我們可以選擇在路由器中一次性導入，然后為每個路由分配其關聯的布局。

如此處所示，我們直接將每個布局組件對象與每個路由的元數據屬性關聯。我們只導入了一次所有的布局。

為了避免布局被卸載和破壞，我們將把布局放在頁面之上，而不是放在頁面內部。

為了將布局置于頁面之上，我們在App.vue組件中創建了一個動態組件。

在模板中，我們可以通過$route訪問當前的路由，并且在每個路由上，我們都可以訪問其元屬性，這意味著我們可以訪問之前設置的布局組件對象。

如果路由在元對象上沒有布局屬性，我們將回退到使用DIV標簽的字符串。

我們只需導入一次布局，無需在每個頁面中導入或包裝布局，現在，我們不會有性能問題，而且在從具有相同布局的兩個路由導航時，我們可以保持狀態。

所以，我的主頁組件現在看起來像這樣：

無需再包裝任何東西；所有的事情都在App.vue中處理，圍繞的<router-view> 每當路由改變時的每個頁面。

這種方法在大多數使用場景中都有效，但它存在一個問題。

布局只有在 route  改變時才會變化。

如果你需要在不改變路由的情況下動態改變布局，那么這種方法將不起作用。只有在少數情況下，你可能會想要動態地改變布局，但這是有可能發生的。

例如：

• 在一段時間后顯示一個鎖定的頁面
• 為了顯示一個離線頁面
• 為了顯示錯誤頁面

那些示例可以通過全屏 modal  系統來實現，但是 modal  很容易通過控制臺從DOM中刪除。

3、使用 ShallowRef，Provide，Inject 以及 Vue Router 的 afterEach鉤子來創建布局系統

為了能夠在任何地方更改布局，而不僅僅是在路由更改時，我們需要在整個應用程序中共享布局的狀態。

我們可以使用 Vuex 或 Pina 來實現這個功能，但在這里我們還是保持簡單吧。

我們將使用Vue的原生響應性系統，配合組合api。

以下是步驟：

• 在App.vue中，我們將創建一個布局常量，該常量包含一個shallowRef以保存當前的布局組件。
• 在一個單獨的文件中，我們將創建一個包含每個布局名稱及其組件的鍵/值對的對象。
• 在App.vue或其他地方，我們將使用路由器的afterEach鉤子來監聽每次路由變化，以動態地改變當前的布局。
• 在App.vue中，我們將向其后代提供布局常量，以便App.vue的樹中的任何組件都可以注入布局常量來改變其值。
• 在路由中，我們將把元數據上的每個布局屬性更改為僅包含要選擇的布局名稱的字符串。

那么，這里是第二步，一個包含所有布局并作為對象展示的文件：

現在我們也可以將路由中的元數據僅更改為字符串，因為它們將映射到上述對象：

現在讓我們把所有這些結合在一起：

我們為什么使用 shallowRef 而不是 ref？

由于我們正在存儲一個組件，這是一個包含許多嵌套值的復雜對象，使用 ref 會導致性能問題。

這也是不必要的，因為我們只需要知道整個組件何時發生了變化，而不是嵌套值何時發生了變化。

那么，我們如何在路由器之外動態改變布局呢？嗯，隨處都可以！

以下是一個例子，展示了 Home  布局可以通過一鍵點擊進行更改。

如你所見，我們現在可以注入并訪問布局的狀態，并將其更改為我們想要的任何組件。多虧了響應性，它將動態地改變App.vue中的組件。

如前所述，對于共享狀態，我們可以使用Vuex或Pinia來做同樣的事情，但對于大多數情況來說，這已經足夠了。

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。