Trong Router Vuejs với Các View có Tên, chúng ta khám phá cách hiển thị nhiều view cùng một lúc thay vì nhúng chúng vào nhau. Các view có tên giúp tạo bố cục phức tạp hơn, như layout với `sidebar` và `main`. Thay vì chỉ có một điểm hiển thị duy nhất, bạn có thể có nhiều và đặt tên cho mỗi view. Một `router-view` không có tên sẽ được gán tên `default`. Để biết thêm chi tiết, bạn có thể tìm hiểu demo tại đây.
Đôi khi bạn cần hiển thị nhiều view cùng một lúc thay vì nhúng chúng vào nhau, ví dụ tạo một bố cục với một view sidebar và một view main. Đây là lúc các view có tên trở nên hữu ích. Thay vì chỉ có một đầu ra duy nhất trong view của bạn, bạn có thể có nhiều và đặt tên cho mỗi view đó. Một router-view không có tên sẽ được gán tên default.
<router-view class="view left-sidebar" name="LeftSidebar" />
<router-view class="view main-content" />
<router-view class="view right-sidebar" name="RightSidebar" />Một view được hiển thị bằng cách sử dụng một component, do đó nhiều view đòi hỏi nhiều component cho cùng một route. Đảm bảo sử dụng tùy chọn components (với s).
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
components: {
default: Home,
// short for LeftSidebar: LeftSidebar
LeftSidebar,
// they match the `name` attribute on `<router-view>`
RightSidebar,
},
},
],
})Bạn có thể tìm thấy một demo hoạt động của ví dụ này tại đây.
1. Các View có Tên Lồng Nhau
Bạn có thể tạo các bố cục phức tạp bằng cách sử dụng các view có tên với các view lồng nhau. Khi làm như vậy, bạn cũng cần đặt tên cho các router-view lồng nhau. Hãy xem một ví dụ về bảng thiết lập:
/settings/emails /settings/profile
+-----------------------------------+ +------------------------------+
| UserSettings | | UserSettings |
| +-----+-------------------------+ | | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | |
| | +-------------------------+ | | | +--------------------+ |
| | | | | | | | UserProfilePreview | |
| +-----+-------------------------+ | | +-----+--------------------+ |
+-----------------------------------+ +------------------------------+
– Nav chỉ là một component thông thường
– UserSettings là component view cha
– UserEmailsSubscriptions, UserProfile, UserProfilePreview là các component view lồng nhau
Lưu Ý: Hãy quên đi về HTML/CSS sẽ trông như thế nào để biểu diễn bố cục như vậy và tập trung vào các component được sử dụng.
<!-- UserSettings.vue -->
<div>
<h1>User Settings</h1>
<NavBar />
<router-view />
<router-view name="helper" />
</div>Sau đó, bạn có thể đạt được bố cục trên với cấu hình route này:
{
path: '/settings',
// You could also have named views at the top
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}Bạn có thể tìm thấy một demo hoạt động của ví dụ này tại đây.
Trong bài viết về Router Vuejs với Các View có Tên, chúng ta đã thấy cách tạo ra các bố cục phức tạp và linh hoạt hơn trong ứng dụng Vuejs của mình. Việc sử dụng các view có tên giúp chia nhỏ các thành phần và quản lý chúng một cách hiệu quả, từ sidebar đến main content. Bằng cách này, Cafedev có thể tận dụng toàn bộ tiềm năng của Vue Router để xây dựng các ứng dụng web mạnh mẽ và linh hoạt hơn bao giờ hết.
Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
