Sử dụng Vue-router cho các ứng dụng đơn trang
NỘI DUNG BÀI VIẾT
Ứng dụng đơn trang là gì?
Ứng dụng đơn trang (Single Page Application) là một trang web hay một ứng dụng web được chạy trên một trang duy nhất, để bạn dễ hình dung hãy thử vào trang Draw.io, tất cả các thao tác, hành động của bạn đều thực hiện trên một trang duy nhất (https://www.draw.io). Với việc sử dụng Ứng dụng đơn trang, trải nghiệm người dùng sẽ giống như sử dụng các ứng dụng window vậy, mọi các thao tác cảm giác nhanh và mượt mà. Rất nhiều các ứng dụng web hiện nay sử dụng công nghệ Single Page Application, có thể kể đến như các tên tuổi lớn như Facebook, các ứng dụng của Google như Gmail, Google Plus, Google Analytics…
Lợi ích của ứng dụng đơn trang
Ứng dụng đơn trang có lợi ích gì? tại sao rất nhiều các website lớn hiện nay sử dụng single page app? Câu hỏi đó sẽ được trả lời bằng những lợi ích của việc sử dụng ứng dụng đơn trang sau đây:
- Dễ dàng trong việc kiểm soát trạng thái người dùng, không cần sử dụng đến cookie, lưu trữ thông tin trong session… trong việc xử lý các trạng thái giữa hai web request.
- Giảm lượng thông tin trao đổi giữa client và server, ví dụ các phần khung trang được giữ nguyên và chỉ tải các nội dung cần thay đổi. Chính vì vậy, Single Page Application có thể sử dụng rất tốt với các đường truyền tốc độ thấp.
- Gần như không có độ trễ khi chuyển trang.
- Giảm số lượng truy vấn đến máy chủ, tưởng tượng trong Gmail có hàng nghìn email, mỗi lần nó sẽ tải 50 email về vì vậy việc mở các email này sẽ rất nhanh do được tải sẵn.
- Đem đến một trải nghiệm người dùng tuyệt vời hơn, các xử lý chạy ngầm giúp các hoạt động thực hiện nhanh chóng.
Vue-router xây dựng ứng dụng đơn trang
Chúng ta đã được biết đến Vue-resource giúp tạo ra các request dạng ajax một cách dễ dàng, thì Vue-route được sử dụng để xây dựng các ứng dụng đơn trang đơn giản cực luôn. Để bắt đầu với Vue-router chúng ta sẽ cùng thực hiện một ví dụ: Chúng ta tạo ra một trang chứa các thành viên trong nhóm, khi click vào từng thành viên, nó sẽ chuyển đến trang thông tin chi tiết của từng thành viên. Xem demo ở dưới đây thông qua jsfiddle.comhttps://jsfiddle.net/aLr114q7/embedded/result,js,html/dark/?username=allaravel
Đầu tiên, chúng ta thực hiện sinh ra một tập dữ liệu gồm 10 thành viên bằng công cụ sinh dữ liệu JSON. Copy đoạn mã sinh JSON sau vào JSON-generator.com rồi click vào Generate
[
'{{repeat(10)}}',
{
index: '{{index()}}',
guid: '{{guid()}}',
picture: 'http://placehold.it/32x32',
age: '{{integer(20, 40)}}',
eyeColor: '{{random("blue", "brown", "green")}}',
name: '{{firstName()}} {{surname()}}',
gender: '{{gender()}}',
company: '{{company().toUpperCase()}}',
email: '{{email()}}',
phone: '+1 {{phone()}}',
address: '{{integer(100, 999)}} {{street()}}, {{city()}}, {{state()}}, {{integer(100, 10000)}}',
about: '{{lorem(1, "paragraphs")}}',
}
]Code language: JavaScript (javascript)Bên output chúng ta đã có tập dữ liệu gồm 10 người dùng làm dữ liệu mẫu cho ví dụ. Chúng ta sẽ từng bước xây dựng ví dụ để hiểu rõ hơn về Vue-router, tuy nhiên nếu bạn nào chưa nắm được kiến thức cơ bản về Vue.js thì nên tìm hiểu trước.
Bước 1: Xây dựng component danh sách thành viên
Đầu tiên, chúng ta đưa dữ liệu mẫu qua một vòng lặp với v-for: chúng ta sẽ in ra tên từng thành viên trong một danh sách bằng cách sử dụng thuộc tính person.namehttps://jsfiddle.net/m7cyk8cx/embedded/result,js,html/dark/?username=allaravel
Vue-router yêu cầu mỗi trang phải được map với các Vue component, do đó thay code HTML trực tiếp ở trên, chúng ta tạo ra một danh sách các component như sau:https://jsfiddle.net/t6uw51gc/embedded/result,js,html/dark/?username=allaravel
Trong đoạn code trên chúng ta đã tạo ra một Vue component là <people-listing>, xem thêm Vue component và single file component để hiểu hơn về cách làm việc với các component trong Vue.
Bước 2: Xây dựng component hiển thị chi tiết từng thành viên.
Trong phần này chúng ta sẽ tách template từ file .js sang file .html để hiển thị cho đẹp hơn, thay vì cách viết như ở trên chúng ta làm như sau:https://jsfiddle.net/4ry8wgko/embedded/result,js,html/dark/?username=allaravel
Với cách viết này, chúng ta trình bày mã HTML trong template sẽ dễ nhìn hơn, hoặc bạn có thể tách từng component ra các file riêng biệt. Tiếp theo chúng ta xây dựng component hiển thị chi tiết cho từng thành viên:https://jsfiddle.net/tq63c4xs/embedded/result,js,html/dark/?username=allaravel
Chúng ta mặc định sẽ hiển thị chi tiết thành viên có guid là selectedID: ’44c5b064-34de-43c2-acdf-141df3887e09′ và trong file HTML thay vì hiển thị danh sách thành viên <people-listing />, chúng ta hiển thị <people-detail />.
Bước 3: Thiết lập router
Trong hai bước đầu chúng ta đã tạo ra hai Vue component, tiếp theo sẽ sử dụng Vue-router để hiển thị các nội dung chi tiết từng thành viên khác nhau tùy thuộc vào đường dẫn URL. Để làm điều này, đầu tiên chúng ta đưa thư viện Vue-router vào file HTML thông qua thẻ <script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.min.js"></script>Code language: HTML, XML (xml)Tiếp theo, thay vì hiển thị thẻ hoặc , chúng ta sẽ hiển thị một thẻ mà router hiểu được:
<div id="app">
<router-view class="view"></router-view>
</div>Code language: HTML, XML (xml)Tiếp đó, chúng ta tạo một instance của VueRouter trong file mã javascript với một số các thiết lập:
var router = new VueRouter({
mode: 'hash',
base: window.location.href,
routes: []
});Code language: JavaScript (javascript)Có ba tham số chúng ta cần chú ý như sau:
- mode: thiết lập chế độ sử dụng để chuyển trang.
- Mặc định là hash: chế độ này sẽ thực hiện tính toán các giá trị hash cho URL từng page, nếu hash khác biệt nó sẽ thực thi.
- history: sử dụng HTML5 History API để xác định URL thay đổi.
- abstract: thiết lập khi làm việc trong môi trường Javascript ví dụ Node.js
- base: thiết lập base URL
- routes: mảng định nghĩa các route.
Trong ví dụ này chúng ta sử dụng mode hash và base sử dụng window.location.href. Nếu sử dụng mode history, chúng ta cần cấu hình lại .htaccess để định hướng tất cả các yêu cầu vào một file. Sau khi đã thiết lập VueRouter, thực hiện khai báo với Vue:
var app = new Vue({
router,
data: {
...
}
}).$mount('#app');Code language: PHP (php)Tiếp đó, chúng ta thay thế các component thành các biến với phương thức Vue.extend({}) để có thể gán cho các route.
// Listing people component
var PeopleListing = Vue.extend({
template: '#people-listing-template',
data: function() {
return {
people: this.$parent.people
}
}
});
// Person detail
var PersonDetail = Vue.extend({
template: '#people-detail-template',
data: function() {
var parent = this.$parent;
var filtered = parent.people.filter(function(item) {
return (item.guid == parent.selectedID) ? item : false;
});
return {
person: filtered[0]
}
}
});
// Create the router
var router = new VueRouter({
mode: 'hash',
base: window.location.href,
routes: []
});Code language: PHP (php)Các bước đã xong, tiếp tục chúng ta sẽ tạo các route và gắn với các biến chứa component ở trên. Các route là các URL khác nhau để hiển thị các component khác nhau, mỗi URL cần được định nghĩa trong mảng routes, bao gồm cả trang chủ với cấu trúc như sau:
- / trang chủ sẽ được gắn cho PeopleListing
- /:id dấu : sẽ giúp cho route hiểu được là lấy guid hiển thị trong URL giúp ánh xạ hiển thị component PersonDetail.
routes: [
{path: '/', component: PeopleListing},
{name: 'person', path: '/:id', component: PersonDetail}
]Code language: JavaScript (javascript)Route thứ hai có thêm thuộc tính name là person và là đường dẫn động với biến chứa guid của từng thành viên. Khi đó, để link đến trang chủ, chúng ta chỉ cần:
<router-link to="/">Trang chủ</router-link>Code language: HTML, XML (xml)Còn link đến các trang chi tiết thành viên, chúng ta thực hiện như sau:
<li v-for="person in people">
{{ person.name }}
<router-link :to="{ name: 'person', params: { id: person.guid }}">Chi tiết</router-link>
</li>Code language: HTML, XML (xml)tham số id sẽ được lấy giá trị từ person.guid.
Kết luận
Ứng dụng đơn trang sử dụng Vue-router thực sự cho trải nghiệm tuyệt vời với tốc độ render rất nhanh, các ứng dụng web hiện nay đã chuyển sang ứng dụng đơn trang nhằm tận dụng được nhiều tính năng ưu việt của mô hình này. Còn bạn thì sao? tôi tin chắc rằng bạn cũng sẽ chuyển dần sang các ứng dụng đơn trang sau khi đã hiểu được ví dụ ở trên.
Còn một chút ngần ngại khi bộ máy tìm kiếm của Google chưa thật sự hiểu được trang web khi sử dụng công nghệ render bằng javascript, như vậy nó cũng khó index vào bộ máy tìm kiếm, do đó các phần này bạn nên áp dụng vào những trang nằm sau phần login của người dùng, hoặc những trang không cần thiết Google phải index.
Cảm ơn các bạn đã đọc.
Các bạn có thể tham khảo các bài viết hay về Laravel tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
Nguồn tham khảo: Allaravel
Leave a Reply