快速上手Vue Router和組合式API：建立靈活可定製的佈局

前端小智發表於2023-04-26
VueAPI
微信搜尋 【大遷世界】, 我會第一時間和你分享前端行業趨勢，學習途徑等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

快來免費體驗ChatGpt plus版本的，我們出的錢
體驗地址:https://chat.waixingyun.cn/#/home
可以加入網站底部技術群，一起找bug.

該教程從基礎開始，介紹了Vue Router的概念，如何配置路由以及如何使用組合式API。它還介紹瞭如何在Vue Router中使用組合式API來建立佈局。教程還包括如何使用路由鉤子函式和路由元資訊來控制佈局。

Vue Router 是在 Vue.js 單頁應用程式中建立路由的事實標準。但是，你是否知道，除了使用它將路由對映到頁面元件之外，還可以使用它來組合頁面佈局？這是一個有趣的建議。讓我們看看如何實現。

假設我們正在構建一個部落格，在該部落格中，某些頁面可能在主要內容的兩側都有側邊欄：

image.png

其他頁面只需要在內容旁邊放置一個側邊欄，而且主內容前後的位置可以變化。

image.png

而其他頁面則根本不需要側邊欄。

image.png

我們該如何完成這個任務？選項1是為側邊欄建立元件，並根據需要在每個頁面中包含它們。例如， AboutShow.vue 將獲得一個類似於以下內容的路由記錄：

// router/index.js
{
    path: '/about',
    component: () => import('../pages/AboutShow.vue')
},

而相應的頁面元件可能是這樣的：

// *AboutShow.vue
<template>
    <div class="flex ...">
        <SidebarOne />
        <main>....</main> 
        <SidebarTwo />
    </div>
</template>

<script setup>
    import SidebarOne from "@/components/SidebarOne"
    import SidebarTwo from "@/components/SidebarTwo"
</script>*

無論如何，關於頁面始終會與側邊欄相耦合。在大多數情況下，這可能並不是什麼大問題。然而，讓我們考慮一種替代方法，即在路由器級別而不是頁面級別組成佈局。

命名檢視

為了實現這一點，我們將為路由記錄提供 components （複數）選項，而不是 component （單數）選項:

{
  path: '/about',
  components: {
    default: () => import('@/pages/AboutShow.vue'),
    LeftSidebar: () => import('@/components/SidebarOne.vue'),
    RightSidebar: () => import('@/components/SidebarTwo.vue'),
  },
},

在這裡，我們定義了關於路由應該包括一個預設元件，即關於頁面。這就是將顯示在RouterView元件中。但是，它還應該包括一個 LeftSidebar 元件，該元件對映到 SidebarOne ，以及一個 RightSidebar 元件，該元件對映到 SidebarTwo 。

現在，為了讓 LeftSidebar 和 RightSidebar 元件知道在哪裡顯示，我們必須使用額外的路由器檢視，稱為命名檢視，以及我們的預設路由器檢視。我們還可以將路由器檢視包裝在帶有一些 Tailwind 類的 div 中，以便美觀地佈局。

<!-- App.vue -->
<template>
<!--...-->
<div class="sm:flex container p-5 mx-auto content justify-betweenflex-wrap">
    <RouterView class="view main-content w-full order-2"></RouterView>
    <RouterView name="LeftSidebar" class="view order-1 w-full"></RouterView>
    <RouterView name="RightSidebar" class="view order-3 w-full"></RouterView>
</div>
<!--...-->
</template>

請注意，新的路由器檢視具有與我們提供給路由記錄的元件屬性的鍵相匹配的名稱屬性（ LeftSidebar 和 RightSidebar ）

最後，這一次頁面本身可以完全排除側邊欄，結果是一樣的。

// *AboutShow.vue
<template>
    <div>
        <main>....</main> 
    </div>
</template>

image.png

這可能看起來有點繞，但現在很酷的是，有了這些額外的命名檢視，我們可以在任何新的路由記錄上靈活地新增一個或兩個側邊欄。

側邊欄

image.png

{
  path: '/posts/:id',
  components: {
    default: () => import('@/pages/PostShow.vue'),
    RightSidebar: () => import('@/components/SidebarTwo.vue'),
  },
},

左側的側邊欄

image.png

//router/index.js
{
    path: '/posts/:id',
    components: {
        default: () => import('@/pages/PostShow.vue'),
        LeftSidebar: () => import('@/components/SidebarOne.vue'),
},

右側邊欄

image.png

//router/index.js
{
    path: '/posts/',
    components: {
        default: () => import('@/pages/PostIndex.vue'),
        RightSidebar: () => import('@/components/SidebarOne.vue'),
},

~完

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://vueschool.io/articles/vuejs-tutorials/composing-layou...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章