Laravel, Vuejs, Bộ định tuyến

Tram Ho

Mở đầu

       Xin chào các bạn tiếp tục với series về vuejs hôm nay mình ĩn giới thiệu với các bạn về Vue router.
Hiện nay ứng dụng một trang SPA (Single Page Application) ngày đang một phổ biến. Là một trang web chỉ trên một trang, tức là thay vì load cả trang web để lấy tất cả những nội dung đã load trước đó rồi thì SPA sẽ làm nhiệm vụ chỉ load những phần cần thay đổi, những phần nào không thay đổi sẽ không cần load để giảm tải cho server và làm cho trang web của chúng ta nhanh hơn, chuyên nghiệp hơn. Đặc biệt làm cho trải nghiệm của người dùng được tốt hơn.

Vue Router là gì?

Vue Router là bộ định tuyến chính thức cho Vue.js. Nó tích hợp sâu với lõi Vue.js để làm cho việc xây dựng các Single Page Applications với Vue.js trở nên dễ dàng.

Hướng dẫn sử dụng

Ở bài này mình xin demo luôn với laravel 5.8 nhé.
Đầu tiên các bạn cần install laravel :

tiếp đó mình install vue router nhé

Vì laravel đã tích hợp sẵn vuejs vào project rồi nên chúng ta cũng không cần làm gì nhiều cả. Chỉ cần nhúng file script chúng ta build vào là được.

Chúng ta sẽ điều hướng cho laravel mặc định vào 1 file view duy nhất như sau:

Ở đây tại file web.php mình để router của laravel điều hướng vào 1 file view duy nhất. Trong file view này sẽ nhúng file js chúng ta đã build và từ đó file js này sẽ điều hướng đến các view cần thiết.

tại file view home.blade.php

Như các bạn thấy thì mình chỉ nhúng file app.js đc build từ các component vuejs và các file js cần thiết khác.
Laravel cấu hình để build các file này tại file webpack.mix.js bằng Laravel mix. Các bạn có thể xem thêm về Laravel mix tại bài viết này của mình.
Và sau khi build xong ta có đc file tại public/app.js và từ đó ta chỉ cần import vào file view home của chúng ta.
Để build các bạn thực hiện lệnh

Tiếp theo mình sẽ tạo 3 component như sau:
mình sẽ tạo 3 component tại thư mục resource/js/components

Nội dung của 3 file này sẽ như sau:

Tại file User như sau:

Tiếp theo ta tạo 1 file routes.js tại thư mục js/ với nội dung như sau:


Ở đây:

path: là đường dẫn hiển thị trên thanh địa chỉ,
component: là component sẽ được render vào layout
name: dùng để sử dụng để định danh route, giúp cho chúng ta có thể sử dụng một cách thuận tiện hơn.
Ngoài ra còn có rất nhiều thuộc tính khác, các bạn có thể tham khảo ở link tài liệu https://router.vuejs.org/guide/essentials/named-routes.html

Tiếp theo tại file js/app.js sẽ chỉnh sửa lại như sau để import vue-router và khai báo sử dụng:

Ở trên có đoạn như sau:

ở đây có đoạn mode: ‘history’ có tác dụng như sau:
Khi ko có đoạn mode này mặc định khi vào các đường dẫn sẽ chúng ta sẽ có thêm dấu # trên trình duyệt

Ví dụ: localhost/#/user
Ok, xem npm đã build xong chưa, rồi ra ngoài load trình duyệt xem đã vào đc view home và load đc nội dung trong component App.vue ra chưa:

Và bước cuối cùng tại file App.vue ta sửa lại như sau:

Chúng ta cần để ý 2 chỗ sau:

Tiếp nữa là:

Ra ngoài test lại:

Rất đơn giản phải không nào. ?

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo