命名視圖與嵌套路由

在 Vue Router 中，命名視圖和嵌套路由是兩個強大的功能，幫助構建更複雜的頁面結構和視圖組合。下面我們分別介紹這兩個概念及其用法。

---

1. 命名視圖

什麼是命名視圖？

命名視圖允許我們在同一個路由下渲染多個視圖。通常情況下，Vue Router 中只有一個 <router-view> 會根據當前路由渲染對應的組件，但有時候我們需要在一個頁面上顯示多個不同的組件，這時可以使用命名視圖來完成。

命名視圖的基本使用

在路由定義中，我們可以通過 components 屬性來指定不同的視圖，而不是 component。components 是一個對象，它的鍵是視圖的名稱，值是對應的組件。

範例：

const routes = [
  {
    path: '/dashboard',
    components: {
      default: DashboardMain,  // 默認視圖
      sidebar: SidebarComponent,  // 命名視圖
      footer: FooterComponent,   // 命名視圖
    },
  },
];

在模板中，我們需要定義多個 <router-view>，並且每個 <router-view> 指定對應的 name 來匹配命名視圖：

<template>
  <div>
    <!-- 默認視圖 -->
    <router-view></router-view>
    
    <!-- 命名視圖：sidebar -->
    <router-view name="sidebar"></router-view>

    <!-- 命名視圖：footer -->
    <router-view name="footer"></router-view>
  </div>
</template>

這樣，當用戶訪問 /dashboard 路徑時，DashboardMain 組件會顯示在默認視圖，SidebarComponent 組件顯示在 sidebar 視圖，而 FooterComponent 則顯示在 footer 視圖。

命名視圖的好處

• 靈活控制布局：可以將不同的組件放在頁面的不同區域，這對於多區域的佈局特別有用，例如：頭部、側邊欄和底部。
• 動態組合視圖：根據不同路由渲染多個視圖組合，使頁面結構更加靈活。

---

2. 嵌套路由

什麼是嵌套路由？

嵌套路由允許我們在路由之間建立父子關係，這樣可以讓父路由渲染一部分內容，而子路由渲染另外一部分內容。它用於構建一個多層次的頁面結構。

嵌套路由的基本使用

1. 定義嵌套路由

嵌套路由通過 children 屬性來定義，這樣子路由可以嵌套在父路由之下。

範例：

const routes = [
  {
    path: '/user/:id',
    component: UserComponent,  // 父路由組件
    children: [
      {
        path: 'profile',
        component: UserProfile,  // 子路由組件
      },
      {
        path: 'posts',
        component: UserPosts,  // 另一個子路由組件
      },
    ],
  },
];

在這個例子中，當用戶訪問 /user/1/profile 時，UserComponent 作為父組件會顯示，並且 UserProfile 作為子路由會嵌套在父組件內部顯示。

2. 在父組件中使用 <router-view>

在父組件 UserComponent 中，我們需要使用 <router-view> 來渲染子路由組件：

<template>
  <div>
    <h1>用戶資料頁面</h1>
    <!-- 子路由渲染位置 -->
    <router-view></router-view>
  </div>
</template>

這樣，當用戶訪問 /user/1/profile 或 /user/1/posts 時，子路由的組件會顯示在 UserComponent 的 <router-view> 中。

3. 嵌套路由的深度

嵌套路由可以是多層的，這意味著我們可以在子路由中再次嵌套子路由，形成多層結構。

範例：

const routes = [
  {
    path: '/user/:id',
    component: UserComponent,
    children: [
      {
        path: 'profile',
        component: UserProfile,
        children: [
          {
            path: 'settings',
            component: UserSettings, // 更深層次的嵌套路由
          },
        ],
      },
    ],
  },
];

---

3. 結合命名視圖與嵌套路由

命名視圖與嵌套路由可以一起使用，以實現更複雜的頁面結構。你可以在嵌套路由中使用多個命名視圖，這樣每個子路由可以渲染到不同的視圖中。

範例：

const routes = [
  {
    path: '/user/:id',
    component: UserComponent,
    children: [
      {
        path: 'profile',
        components: {
          default: UserProfile,
          sidebar: UserSidebar,
        },
      },
      {
        path: 'posts',
        components: {
          default: UserPosts,
          sidebar: UserSidebar,
        },
      },
    ],
  },
];

在模板中：

<template>
  <div>
    <!-- 父路由部分 -->
    <router-view></router-view>
    
    <!-- 子路由部分的 sidebar 視圖 -->
    <router-view name="sidebar"></router-view>
  </div>
</template>

在這個例子中，當用戶訪問 /user/1/profile 或 /user/1/posts 時，默認的 UserProfile 或 UserPosts 組件會在主區域渲染，而 UserSidebar 組件則會在側邊欄顯示。

---

4. 總結

• 命名視圖 允許在同一個路由下渲染多個視圖，非常適合複雜佈局的需求。
• 嵌套路由 使得路由可以建立父子關係，從而構建多層次的頁面結構。
• 命名視圖與嵌套路由結合 可以進一步增加頁面布局的靈活性，使應用更易於維護和擴展。

這些功能共同提供了強大的路由配置能力，可以滿足大多數現代應用中的路由需求。