Pernah memperhatikan tidak, setiap kita berpindah halaman di Medium, peramban (browser) tidak memuat ulang seluruh bagian web. Namun hanya memuat sebagian dan sebutuhnya.
Semisal, dari halaman dashboard, kemudian kita mengklik salah satu tautan (hyperlink) artikel, maka yang akan dimuat hanya konten artikel tersebut, tanpa perlu memuat ulang header & footer.
Kenapa harus dibuat begitu? Untuk kenyamanan pengguna dan performa tentunya.
Di Laravel, kita bisa membuat fitur yang serupa menggunakan VueJS. Sayangnya, mengandalkan VueJS saja sepenuhnya — dengan manipulasi komponen — masih dirasa sulit untuk membuat mendekati sempurna. Oleh karenanya, kita butuh package tambahan untuk mendukung VueJS, sesuai judul, nama package-nya adalah Vue Router.
Anggap saja kita punya tiga buah komponen VueJS, antara lain: <user-index>
, <user-create>
, dan <user-view>
. Dari namanya, dapat diketahui kalau komponen tersebut dioperasikan untuk menjalankan fungsi CRUD data user — minus update data — tentunya.
Dari ketiga komponen tersebut, kita bisa saja membuat tiga route yang berbeda di Laravel. Masing-masing route akan memuat satu buah view (Blade). Setip view, juga memuat komponen VueJS sesuai dengan fungsinya, view user index akan memuat komponen <user-index>
misalnya.
Route::get('user', '[email protected]'); Route::get('user/create', '[email protected]'); Route::get('user/{id}', '[email protected]');
Tidak ada yang salah memang. Namun, bagi saya, ini cukup membuang sumber daya.
Contoh yang saya alami, dari halaman user create ingin berpindah ke halaman index user. Dengan request HTTP, kita akan memuat ulang peramban untuk menampilkan halaman lainnya. Begitu seterusnya jika kita ingin berganti ke halaman lainnya.
Inginnya, saya membuat satu buah route user, yang di dalamnya kita bisa berpindah & berganti halaman/komponen tanpa harus memuat ulang peramban. Seperti yang sudah saya singgung di atas, Laravel dan VueJS saja tidak mendukung fitur ini. Oleh karenanya, kita butuh librari tambahan, yaitu Vue Router.
Mempersiapkan Aplikasi dari Sisi Laravel
Sebelum menggunakan Vue Router, dan semakin beranjak jauh ke bahasan VueJS, terlebih dahulu kita harus mempersiapkan basis aplikasi di Laravel itu sendiri.
Dari Laravel, kita akan membuat satu buah route dengan tautan /user
dan merujuk ke controller UserController. Dalam controller tersebut, terdapat empat buah metode yang berfungsi untuk operasi CRUD. Skrip lengkapnya dapat dilihat pada media di bawah.
<?php namespace App\Http\Controllers; use App\User; use Illuminate\Http\Request; class UserController extends Controller { public function paginate() { $users = User::orderBy('name', 'ASC') ->paginate(request('limit', 20)); if (request()->all()) { $users->appends(request()->all()); } return response()->json($users); } public function view() { return view('user.view'); } public function store(Request $request) { $this->validate($request, [ 'name' => 'required|string|max:50', 'email' => 'required|email|unique:users,email', ]); $user = User::create([ 'name' => $request->name, 'email' => $request->email, 'password' => bcrypt(str_random()), ]); return response()->json($user); } public function show($id) { $user = User::whereId($id)->first(); if (empty($user)) { return response()->json([ 'message' => 'User not found.', ], 404); } return response()->json($user); } }
Metode view()
berfungsi untuk memuat view dan menampilkan komponen dari VueJS. Sisanya merupakan proses yang akan mengembalikan response data dalam format JSON. Metode ini nantinya akan dipanggil melalui tautan dengan teknik AJAX dari komponen VueJS.
Jangan lupa untuk menambahkan route untuk masing-masing metode controller di atas.
Route::post('/user', '[email protected]'); Route::get('/user/paginate', '[email protected]'); Route::get('/user/{id}', '[email protected]'); Route::get('/user', '[email protected]');
Sampai di sini, hampir tak ada bedannya dengan apa yang biasa kita lakukan dalam mengembangkan aplikasi web berbasis Laravel. Membuat controller, memuat view, manipulasi pangkalan data, kemudian mendefinisikannya dalam route.
Nah, hal yang cukup mencolok dalam aplikasi adalah penggunaan tag yang tidak biasa pada view yang dimuat oleh controller di atas. Sebagai contoh pada view berikut.
@extends('layouts.app') @section('content') <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">User</div> <div class="panel-body"> <transition> <router-view></router-view> </transition> </div> </div> </div> </div> </div> @endsection
Tag <router-view>
berfungsi untuk menampilkan komponen yang akan kita definisikan nantinya di Vue Router.
Sedangkan tag <router-link>
merupakan komponen yang telah disediakan Vue Router. Kita bisa menggunakannya di mana saja dalam view selama dalam cakupan vue instance. Contoh skripnya saya implementasikan pada komponen user index.
Penjelasan lebih detail, dapat dibaca langsung pada dokumentasi resmi Vue Router.
router-link · vue-router
is the component for enabling user navigation in a router-enabled app. The target location is specified with the to prop. It renders as an tag with correct href by default, but can be configured with the tag prop. In addition, the link automatically gets an active CSS class when the target route is active.
Menginstal dan Mengkonfigurasi Vue Router
Pertama, instal terlebih dahulu Vue Router menggunakan NPM. Adapun perintahnya adalah sebagai berikut:
$ npm install --save-dev vue-router
Atau, juga bisa menggunakan Yarn package.
$ yarn add dev vue-router
Modifikasi berkas resources/assets/js/app.js
sehingga menjadi seperti skrip di bawah.
/** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ Vue.component('example', require('./components/Example.vue')); /** * Vue Router * * @link http://router.vuejs.org/en/installation.html */ import VueRouter from 'vue-router'; Vue.use(VueRouter); // define routes for users const routes = [ { path: '/', name: 'userIndex', component: require('./components/user/index.vue') }, { path: '/create', name: 'userCreate', component: require('./components/user/create.vue') }, { path: '/view/:id', name: 'userView', component: require('./components/user/view.vue') } ] const router = new VueRouter({ routes }); const app = new Vue({ router }).$mount('#app');
Mulai dari baris ke 21, kita mengimpor package Vue Router dan menambahkannya ke dalam VueJS. Di komponen nantinya, kita dapat menggunakan objek this.$route
dan this.$router
untuk mengakses objek Vue Router tersebut.
Properti
this.$route
berisi informasi route yang sedang diakses, mulai dari path, name, params, dan lain sebagainya. Sedangkanthis.$router
berisi objek untuk memanipulasi route, semisal redirect dan replace.
Dari baris ke 25, didefinisikan route untuk CRUD user. Setiap satu route, akan memanggil satu komponen VueJS yang telah dibuat sebelumnya.
Perlu diperhatikan lagi, bahwa route tersebut tetap berbasis pada route utama yang telah didefinisikan pada Laravel, yaitu /user
.
domain.com/user/# // user index domain.com/user/#/create // create new user domain.com/user/#/view/12 // view user
Untuk skrip lengkap masing-masing komponen dapat dillihat pada tautan berikut.
Contoh Aplikasi
Seperti biasa, saya selalu menyertakan contoh lengkap aplikasi pada setiap tutorial. Kalian bisa melihat atau menggunakannya dari repositori Github berikut.
laravel-id/vue-router
vue-router – Harmony Laravel + Vue + VueRouter
Demo aplikasi dapat langsung dilihat pada tautan berikut.
Untuk contoh aplikasi yang lebih kompleks, kalian bisa lihat pada sumber kode (source code) Glosarium Indonesia. Implementasi Vue Router dapat dilihat pada cabang (branch) revue.
Idealnya, Vue Router umum digunakan untuk SPA (Single Page Application) untuk website yang tidak terlalu kompleks. Pun begitu, Vue Router juga dapat dikombinasikan dengan route bawaan framework Laravel. Tentunya, Vue Router tidak bisa diakses sebelum kita membuat route di Laravel terlebih dahulu bukan? ?
Masih bingung dengan penjelasan di atas? Jangan sungkan untuk bertanya melalui publikasi ini. Bagikan tulisan ini jika bermanfaa buat kalian. Jangan lupa, ikuti juga Laravel Indonesia untuk mendapatkan tulisan terbaru seputar Laravel dalam Bahasa Indonesia. ?
apakah itu berpengaruh ke SEO nya gan?
Ya gan, salah satu kendala SPA seperti Angular dan Vue adalah SEO rendering. Khusus untuk bot Google dan Bing udah bisa baca async. Tapi Twitter dan Facebook belum.
Tapi untungnya, VueJS juga merilis package SSR untuk mengangi kasus di atas. Silakan dibaca langsung di tautan: https://ssr.vuejs.org/en/. 🙂
Cara kerja vue router sendiri Ini load pake ajax ?
Iya.
tanya lagi gan,
trus bedanya dengan vuex apa?
Data yang ada pada setiap komponen Vue JS itu bersifat lokal, hanya komponen tersebut yang dapat memanipulasi datanya.
Sederhananya, Vuex ini berfungsi untuk menjadikan suatu data menjadi global. Dapat dimanipulasi oleh komponen lain.
Saya pernah menulis tentang Komunikasi Antara Dua Komponen VueJS di Laravel (https://www.laravel.web.id/2017/03/30/komunikasi-antara-dua-komponen-vuejs-di-laravel), tapi ini cukup tricky.
Nah, konsep Vuex kurang lebih seperti yang tulisan yang saya sebutkan, tapi dengan cara Vue JS tentunya.
mas bisa di kasih contoh untuk url dinamis , implementasi di vue itu khusus nya di router nya itu gmn ya
trims.
Halo Mas,
Di contoh aplikasi sebenarnya sudah ada contoh penggunaan route dinamis untuk melihat detail user.
Pertama, definisikan dahulu routenya.
Lihat :id merupakan sebuah nilai dinamis.
Kemudian, di komponen, kita bisa menggunakan router tersebut tersebut pada link, dan mendefinisikan :id pada route.
Untuk menangkap paramater dari route, bisa menggunakan potongan skrip berikut.
Aku lagi belajar vue.js di laravel mas, terimakasih tutorial nya, sangat bermanfaat 🙂
mas kok punya saya blank.kayak ga work.kenapa ya?
Bisa di-debug dengan check console dari browser.
Saya Menggunakan Sub Directory tetapi malah gak running kenapa ya,
Routenya :
Route::get(‘admin/user’, ‘Admin\[email protected]’);
Route::get(‘admin/user/create’, ‘Admin\[email protected]’);
Route::get(‘admin/user/{id}’, ‘Admin\[email protected]’);
apa yang perlu di rubah di vue componentnya dan di app.js
saya coba gagal hanya tampil header “User” saja ketika diakses tidak ada datanya.