Chào mừng đến với Cafedev, nơi chúng tôi chia sẻ kiến thức và kinh nghiệm về phát triển web. Trong bài viết này, chúng ta sẽ khám phá về hệ thống bố cục trong Vue 3 và cách áp dụng các bố cục thông minh cho VueJS. Hệ thống bố cục này giúp tối ưu hóa trải nghiệm người dùng và quản lý mã nguồn một cách hiệu quả. Hãy cùng tìm hiểu về cách sử dụng các bố cục thông minh này để tạo ra các ứng dụng VueJS linh hoạt và mạnh mẽ trên Cafedev.
Trong bài viết này, chúng ta sẽ xem xét về hệ thống bố cục trong Vue 3.
Ban đầu, không có bất kỳ hệ thống quản lý bố cục nào trong Vue, vì vậy chúng ta cần tự làm.
Dưới đây là một bản trình bày về cách hệ thống bố cục này hoạt động. Bạn có thể sao chép demo này bằng liên kết: https://gitlab.com/sakensaten1409/e_menu/-/tree/vue-layouts-middleware
1. routes/index.js
import {createRouter, createWebHistory} from 'vue-router'
import {loadLayoutMiddleware} from "@/router/middleware/loadLayoutMiddleware";
import OnePage from "@/views/OnePage";
import TwoPage from "@/views/TwoPage";
import ThreePage from "@/views/ThreePage";
import FourPage from "@/views/FourPage";
import FivePage from "@/views/FivePage";
import SixPage from "@/views/SixPage";
const routes = [
{
path: '/',
name: 'one',
component: OnePage,
meta: {
layout: 'AppLayoutGuest'
}
},
{
path: '/two',
name: 'two',
component: TwoPage,
meta: {
layout: 'AppLayoutGuest'
}
},
{
path: '/three',
name: 'three',
component: ThreePage,
meta: {
layout: 'AppLayoutUser'
}
},
{
path: '/four',
name: 'four',
component: FourPage,
meta: {
layout: 'AppLayoutUser'
}
},
{
path: '/five',
name: 'five',
component: FivePage,
meta: {
layout: 'AppLayoutAdmin'
}
},
{
path: '/six',
name: 'six',
component: SixPage,
meta: {
layout: 'AppLayoutAdmin'
}
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
// Before each route changing the loadLayoutMiddleware middleware is executing.
router.beforeEach(loadLayoutMiddleware)
export default routerNói chung, chúng ta có 3 bố cục (Khách, Người dùng, Quản trị) và 6 thành phần con (Một, Hai, Ba, Bốn, Năm, Sáu). Trước mỗi lần thay đổi route, middleware loadLayoutMiddleware được thực thi.
2. router/middleware/loadLayoutMiddleware.js
/**
* This middleware is used to dynamically update the Layouts system.
*
* As soon as the route changes, it tries to pull the layout that we want to display from the laptop. Then it loads the layout component, and assigns the loaded component to the meta in the layout Component variable. And layoutComponent is used in the basic layout AppLayout.vue, there is a dynamic update of the layout component
*
* If the layout we want to display is not found, loads the default layout App Layout Default.vue
* */
export async function loadLayoutMiddleware(route) {
try {
let layout = route.meta.layout
let layoutComponent = await import(`@/layouts/${layout}.vue`)
route.meta.layoutComponent = layoutComponent.default
} catch (e) {
console.error('Error occurred in processing of layouts: ', e)
console.log('Mounted default layout AppLayoutDefault')
let layout = 'AppLayoutDefault'
let layoutComponent = await import(`@/layouts/${layout}.vue`)
route.meta.layoutComponent = layoutComponent.default
}
}Ở đây, chúng ta kiểm tra route để tìm tên bố cục trong meta và cố gắng tải bố cục này. Nếu xảy ra lỗi, bắt lỗi và tải bố cục mặc định. Cuối cùng, khởi tạo thành phần bố cục vừa tải vào meta.
3. layouts/AppLayout.vue
<template>
<component :is="this.$route.meta.layoutComponent">
<slot/>
</component>
</template>
<script>
import {lifecycleLoggerMixin} from "@/mixins/lifecycleLoggerMixin";
export default {
name: "AppLayout",
mixins: [lifecycleLoggerMixin],
}
</script>
<style scoped>
</style>Ở đây, chúng ta thay thế thành phần một cách động bằng chỉ thị :is của Vue.
4. views/OnePage.vue
<template>
<div>
<p>This is an One page</p>
</div>
</template>
<script>
import {lifecycleLoggerMixin} from "@/mixins/lifecycleLoggerMixin";
export default {
name: 'OnePage',
mixins: [lifecycleLoggerMixin]
}
</script>Đây là một ví dụ về các thành phần con của một bố cục.
5.Kết luận
Với việc triển khai hệ thống bố cục này, chúng ta đã có được:
1. Hiệu suất cải thiện
2. Không có sự nhấp nháy hoặc glitch (lắp đặt và gỡ bỏ thêm)
3. Mã code sạch sẽ
Trên Cafedev, chúng tôi hy vọng rằng bài viết về hệ thống bố cục Vue 3 đã mang lại cho bạn cái nhìn rõ ràng và chi tiết về cách tạo ra các bố cục thông minh cho VueJS. Sử dụng các bố cục thông minh này không chỉ giúp tối ưu hóa trải nghiệm người dùng mà còn giúp tăng cường khả năng quản lý mã nguồn của ứng dụng của bạn. Hãy tiếp tục khám phá các bài viết mới nhất trên Cafedev để cập nhật kiến thức và kỹ thuật mới nhất trong lĩnh vực phát triển web.
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!
