Hướng dẫn sử dụng routes của Laravel trong VueJs

I. Giới thiệu

Hiện tại Laravel + Vuejs hiện nay là một bộ đôi đang gây chấn động trong làng CodeBiz hiện nay. Laravel là một framework nổi tiếng, đẹp trai và được đông đảo người sử dụng rất trong các frameworks của PHP. Còn Vuejs cũng không kém phần khi là một Javascript Framework thanh mảnh, gọn nhẹ nhưng không kém phần mạnh bạo.

Khi các bạn sử dụng chung cặp đôi này thì chắc hẳn có nhiều người sẽ có thắc mắc ví dụ như là làm thế nào để sử dụng route của Laravel vào Vuejs cho thuận tiện. Vì vậy, hôm nay mình sẽ hướng dẫn các bạn có thể sử dụng route của Laravel trong VueJS một cách đơn giản và hiệu quả. Let’s get started!

II. Hướng dẫn

Cài đặt:

Chúng ta sẽ sử dụng một package là aaronlord/laroute. Để cài đặt, các bạn chạy lệnh sau trong thư mục Laravel của bạn:

composer require lord/laroute

Tiếp theo, cho vào danh sách providers của bạn:

/*
    * Package Service Providers...
    */
Lord\Laroute\LarouteServiceProvider::class,

Rồi chạy lệnh sau:

php artisan vendor:publish --provider='Lord\Laroute\LarouteServiceProvider'

Sau đấy các bạn hãy chạy lệnh dưới đây để nó generate từ file route của Laravel sang một file Javascript. Bản chất của nó là như vậy đó.

php artisan laroute:generate

Lưu ý: mỗi khi thêm/sửa route thì bạn cần phải chạy lại lệnh bên trên để update.

Sau khi chạy lệnh trên thì một file laroute.js sẽ được tạo trong thư mục public/js/ của bạn. Nếu bạn muốn thay đổi tên file hay đường dẫn đến file thì các bạn có thể chỉnh trong đường dẫn sau nhé:

app/config/packages/lord/laroute/config.php

Sau khi có file này rồi, các bạn nhúng vào file blade master layout của mình nhé:

<script type="text/javascript" src="{{ asset_url('js/laroute.js') }}"></script>

Sử dụng:

Đã xong phần cài đặt rồi, giờ chúng ta sẽ dùng thử xem sao nhé. Giả dụ mình có file route như sau. Chúng ta sẽ gọi qua name vì vậy cần set name cho nó.

Nhớ chạy lại lệnh dưới đây để cập nhật lại file route của package. File js trên sẽ tạo ra một biến của window (global), các bạn có thể dùng nó trong VueJS/Javascript bình thường nhé.

php artisan laroute:generate

Rồi bây giờ thử test trên console của Chrome xem sao nhé. Các bạn có nhớ bên trên mình đã khai báo tên cho router rồi thì ở đây mình chỉ việc gọi nó ra thôi:

laroute.route('posts.index');

Các hàm khác có thể sử dụng:

Thư viện này còn một 2 hàm để các bạn có thể thao tác với route và URL trong Laravel. Các bạn có thể xem thêm tạo github của package nhé.

action

Lấy về URL cho một action của Controller.

/** 
 * laroute.action(action, [parameters = {}])
 *
 * action     : The action to route to.
 * parameters : Optional. key:value object literal of route parameters.
 */

laroute.action('HomeController@getIndex');

route

Lấy về URL cho một route với tham số là tên của route đã khai báo.

/**
 * laroute.route(name, [parameters = {}])
 *
 * name       : The name of the route to route to.
 * parameters : Optional. key:value object literal of route parameters.
 */
 
 laroute.route('Hello.{planet}', { planet : 'world' });

II. Kết thúc

Trên đây là bài hướng dẫn của mình. Nếu có điều gì thắc mắc các bạn có thể comment bên dưới để mình trả lời nhé.

Thân ái và quyết thắng!!!

Tham khảo: https://github.com/aaronlord/laroute