Building a Vue single-page application (SPA) with Laravel
Trong bài viết này, Chúng ta sẽ tìm hiểu cách sử dụng Vue router kết hợp Laravel để xây dựng một Vue single-page application (SPA). Flow hoạt động của Vue SPA & Laravel như sau: Đầu tiên là request truy cập được gửi đến router của Laravel Laravel sẽ render bố cục SPA Tiếp theo là sử ...
Trong bài viết này, Chúng ta sẽ tìm hiểu cách sử dụng Vue router kết hợp Laravel để xây dựng một Vue single-page application (SPA).
Flow hoạt động của Vue SPA & Laravel như sau:
- Đầu tiên là request truy cập được gửi đến router của Laravel
- Laravel sẽ render bố cục SPA
- Tiếp theo là sử dụng history.pushState API để điều hướng URL mà không cần tải lại trang
I. Installation
$composer create-project --prefer-dist laravel/laravel LaravelVuejs $cd LaravelVuejs $cp .env.example .env $php artisan key:generate $npm install $npm install vue-router
II. Configuring Vue Router
Sau khi đã cài đặt xong, ta cần import lib vào để sử dụng được chúng. Truy cập file theo path: resources/assets/js/app.js chỉnh sửa nội dung như sau:
// * Import thư viện VueRouter với Vue.use() import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) // * Import các component (App, home, about, service, contact) import App from './views/App' import Home from './views/Home' import About from './views/About' import Service from './views/Service' import Contact from './views/Contact' const router = new VueRouter({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About, }, { path: '/service', name: 'service', component: Service, }, { path: '/contact', name: 'contact', component: Contact, }, ], }); // * Truyền route constant router vào ứng dụng Vue mới để có thể access đến this.$router và this.$route const app = new Vue({ el: '#app', components: { App }, router, });
Nhìn đoạn code trên chắc bạn cũng đã hiểu nó làm gì rồi phải không.
III. Create view
Tiếp theo tạo 1 số view component:
mkdir resources/assets/js/views touch resources/assets/js/views/App.vue touch resources/assets/js/views/Home.vue touch resources/assets/js/views/About.vue touch resources/assets/js/views/Service.vue touch resources/assets/js/views/Contact.vue
App.vue là element container ngoài cùng của ứng dụng. Ở trong component này, chúng ta sẽ định nghĩa một nhóm ứng dụng và một số điều hướng sử dụng tag <router-link/> của Vue Router:
<template>
<div>
<h1>Vue Router Demo App</h1>
<p>
<router-link :to="{ name: 'home' }">Home</router-link> |
<router-link :to="{ name: 'about' }">About</router-link> |
<router-link :to="{ name: 'service' }">Service</router-link> |
<router-link :to="{ name: 'contact' }">Contact</router-link> |
</p>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {}
</script>
Thành phần quan trọng nhất trong Component App là tag <router-view></router-view> , đây là nơi router sẽ render thành phần đã cho mà nó phù hợp với route (VD: Home hoặc About, Service).
Tiếp theo Bạn cần tạo nôị dung cho các page (Home, About, Contact) resources/assets/js/views/Home.vue
<template> <p>This is the homepage</p> </template>
resources/assets/js/views/About.vue
<template> <p>This is the Aboutpage</p> </template>
resources/assets/js/views/Service.vue
<template> <p>This is the Servicepage</p> </template>
resources/assets/js/views/Contact.vue
<template> <p>This is the Contactpage</p> </template>
VI. Server-Side
Mở tệp routes/web.php và thay thế welcome route bằng:
Route::get('/{any}', 'SpaController@index')->where('any', '.*');
Tạo SpaController
$php artisan make:controller SpaController
Nội dung SpaController
<?php namespace AppHttpControllers; use IlluminateHttpRequest; class SpaController extends Controller { public function index() { return view('spa'); } }
Nội dung view page
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="awidth=device-awidth, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue SPA Demo</title> </head> <body> <div id="app"> <app></app> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
Chúng ta đã khai báo required #app element mà nó chứa App component để cho Vue render, cùng với việc hiển thị thành phần thích hợp dựa trên URL.
V. Running the Application
Chúng ta cần build trước khi chạy ứng dụng.
npm run watch
Chúng ta đã có layout cho Vue SPA & sử dụng Laravel để làm API. Bài tới mình sẽ đi sâu hơn, như cách Sử dụng các route parameters, Child route Thực hiện một API request từ một component đến Laravel. Thank you !!!
[Nguồn tham khảo: https://laravel-news.com]
