命名路由和命名視圖

命名路由和命名視圖提供了組織和導航 Vue.js 應用程序的強大方法，尤其是在它們的復雜性增加時。它們提供了一種語義更合理、可維護的路由方法，使您的代碼更易于理解和修改。命名路由允許您按名稱引用路由，而不是依賴 URL，而命名視圖允許您根據當前路由在頁面的不同部分呈現多個組件。本課將詳細探討這些概念，為您提供在 Vue.js 項目中有效使用它們的知識和技能。

命名路由

命名路由提供了一種為應用程序中的每個路由分配唯一名稱的方法。這允許您使用路由的名稱而不是 URL 導航到路由，從而使您的代碼更具可讀性和可維護性。如果 URL 結構發生更改，則只需更新路由定義，并且按名稱對該路由的所有引用都將自動更新。

定義命名路由

要定義命名路由，只需向路由配置對象添加 name 屬性即可。

const routes = [{path: '/users/:id',name: 'user', // This is the named routecomponent: User,},{path: '/about',name: 'about',component: About,},
];

在此示例中，我們定義了兩個命名路由：user 和 about。 用戶路由還包括一個動態段 ：id。

使用命名路由導航

一旦你定義了一個命名路由，你就可以使用它通過 router.push（） 以編程方式導航，或者在你的模板中使用 <router-link>。

編程導航：

// Assuming you have access to the router instance (e.g., this.$router)
this.$router.push({ name: 'user', params: { id: 123 } });

在這里，我們將導航到 id 參數設置為 123 的用戶路由。

使用 <router-link> 導航：

<router-link :to="{ name: 'user', params: { id: 456 } }">Go to User 456</router-link>
<router-link :to="{ name: 'about' }">About Us</router-link>

<router-link> 組件會根據命名路由及其參數自動生成正確的 URL。

使用命名路由的好處

• 可讀性： 使用名稱而不是 URL 可以使您的代碼更易于理解。
• 可維護性： 如果更改 URL，則只需更新路由定義，而無需更新使用該 URL 的每個實例。
• 靈活性： 命名路由可以更輕松地重構應用程序和更改 URL 結構，而不會破壞現有導航。

示例：電子商務應用程序

考慮一個帶有產品頁面的電子商務應用程序。您可以使用命名路由，而不是對產品頁面 URL 進行硬編碼：

const routes = [{path: '/products/:productId',name: 'product',component: ProductDetails,},
];

現在，要導航到特定的產品頁面：

<router-link :to="{ name: 'product', params: { productId: product.id } }">{{ product.name }}</router-link>

如果您稍后決定將產品頁面 URL 更改為 /item/:p roductId，則只需更新路由定義，使用名為 route 的產品的所有鏈接都將自動更新。

示例：博客應用程序

在博客應用程序中，您可能有用于單個博客文章的路由。使用命名路由可以簡化鏈接到這些文章的過程：

const routes = [{path: '/posts/:postId',name: 'post',component: BlogPost,},
];

鏈接到特定的博客文章：

<router-link :to="{ name: 'post', params: { postId: post.id } }">{{ post.title }}</router-link>

練習：在簡單應用程序中實現命名路由

1. 使用 Vue CLI 創建一個新的 Vue.js 項目。
2. 定義三個組件： 主頁 、 產品和``聯系人 。
3. 創建 router.js 文件并為每個零部件定義路由，分配 home、products 和 contact 等名稱。
4. 在 App.vue 文件中，使用帶有命名路由的 <router-link> 組件創建指向每個頁面的導航鏈接。
5. 為產品詳細信息 （/products/：id） 添加名稱為 product-detail 的動態路由。
6. 在 Products 組件中，創建一個產品列表，并使用 <router-link> 和 product-detail 命名路由鏈接到每個產品的詳細信息頁面。

命名視圖

命名視圖允許您在單個線路中同時顯示多個零部件。這對于創建具有多個部分的布局（如側邊欄、主內容區域和頁腳）非常有用。

定義命名視圖

要定義命名視圖，請在路由配置中使用 components 選項，而不是 component 選項。components 選項是一個對象，其中每個鍵是視圖的名稱，每個值是要在該視圖中呈現的組件。

const routes = [{path: '/dashboard',components: {default: Dashboard, // The default viewsidebar: Sidebar,notifications: Notifications,},},
];

在此示例中，我們定義了三個命名視圖：default、sidebar 和 notifications。 默認視圖在 <router-view> 中呈現，沒有 name 屬性，而其他視圖在 <router-view> 組件中呈現，具有相應的 name 屬性。

渲染命名視圖

要渲染命名視圖，您需要在模板中使用多個 <router-view> 組件，每個組件都有一個與要渲染的視圖名稱匹配的 name 屬性。

<template><div><header><h1>Dashboard</h1></header><div class="container"><aside><router-view name="sidebar"></router-view></aside><main><router-view></router-view>  <!-- Default view --></main><aside><router-view name="notifications"></router-view></aside></div><footer><p>&copy; 2023</p></footer></div>
</template>

在此示例中， 邊欄組件將呈現在 <router-view name=“sidebar”> 中， 儀表板組件（默認視圖）將呈現在 <router-view> 中， 通知組件將呈現在 <router-view name="notifications"> .

使用命名視圖的好處

• 布局靈活性： 命名視圖允許您創建同時呈現多個組件的復雜布局。
• 代碼組織： 它們通過將頁面的不同部分分離到單獨的組件中來幫助您組織代碼。
• 可 重用： 您可以通過將相同的組件分配給不同的命名視圖，在不同的布局中重用這些組件。

示例：管理員面板

考慮一個帶有側邊欄、主要內容區域和通知部分的管理面板。您可以使用命名視圖來構建此布局：

const routes = [{path: '/admin',components: {default: AdminDashboard,sidebar: AdminSidebar,notifications: AdminNotifications,},},
];

模板將如下所示：

<template><div class="admin-layout"><aside class="sidebar"><router-view name="sidebar"></router-view></aside><main class="content"><router-view></router-view></main><aside class="notifications"><router-view name="notifications"></router-view></aside></div>
</template>

示例：具有多個部分的應用程序

假設有一個應用程序，其中包含頁眉、主要內容和頁腳。命名視圖可以幫助構建此結構：

const routes = [{path: '/app',components: {header: AppHeader,default: AppContent,footer: AppFooter,},},
];

模板：

<template><div class="app-layout"><header><router-view name="header"></router-view></header><main class="content"><router-view></router-view></main><footer><router-view name="footer"></router-view></footer></div>
</template>

練習：在 Dashboard 應用程序中實現命名視圖

1. 從上一個練習擴展項目。
2. 創建 3 個組件：DashboardContent、DashboardSidebar 和 DashboardNotifications。
3. 為 /dashboard 創建路由，并使用命名視圖在具有側邊欄、主內容區域和通知部分的布局中呈現這些組件。
4. 在 App.vue 文件中，添加具有適當 name 屬性的 <router-view> 組件來渲染命名視圖。
5. 使用 CSS 設置布局樣式，以創建具有視覺吸引力的儀表板。

組合命名路由和命名視圖

您可以組合命名路由和命名視圖，以創建更加靈活和可維護的路由配置。這允許您導航到特定布局，其中多個組件使用路由名稱同時呈現。

示例：組合命名路由和命名視圖

const routes = [{path: '/admin/users',name: 'admin-users',components: {default: AdminUsers,sidebar: AdminSidebar,notifications: AdminNotifications,},},
];

現在，你可以使用 admin-users 命名 route 導航到此布局：

<router-link :to="{ name: 'admin-users' }">Manage Users</router-link>

此方法提供了一種清晰簡潔的方式來導航到具有多個組件的復雜布局。